不變違規:物件作為無效的React Children
當嘗試將物件渲染為以下內容時,React 中可能會發生不變違規錯誤:一個直接的React 子程序。在給定的元件中,當 onClick 處理程序傳遞一個物件(事件物件)作為參數時,就會出現錯誤。
React 期望子元素是原始值(例如字串、數字)、React元素,或這些值的陣列。物件、物件陣列或其他複雜結構不會被辨識為有效的子結構。
要解決此錯誤,應將事件處理程序 this.onItemClick.bind(this, item) 包裝在箭頭函數中以防止事件物件作為參數傳遞。正確的實作是:
{items.map((item) => ( <li key={item} onClick={(e) => this.onItemClick(e, item)}>{item}</li> ))}
此錯誤的另一個原因可能是物件無意中呈現為字串。例如:
breadcrumbElement = { ...someObject ... }; {breadcrumbElement} // Renders as an object, not a string
確保所有子元素都是這些值的字串、元素或陣列。如果需要表示一個對象,請將其轉換為字串或將其包裝在 React.Fragment 中以避免此錯誤。
以上是為什麼我收到「不變違規:物件作為無效的 React 子物件」?的詳細內容。更多資訊請關注PHP中文網其他相關文章!