為什麼我在我的 React 應用程式中收到「不變違規：物件作為 React 子項無效」？

React 錯誤：物件作為子物件

在React 應用程式中，「不變違規：物件作為React 子物件無效」錯誤發生在以下情況嘗試將物件渲染為元件的子物件。當子級期望一個字串、數字或元素但收到一個物件時，就會出現此問題。

在給定的範例中，在 render 方法中的地圖函數中， this.onItemClick.bind(this, item ) 錯誤地將整個事件物件作為屬性傳遞給 onClick 處理程序。因此，onClick 事件處理程序接收該事件及其屬性作為對象，從而觸發錯誤。

要解決此問題，您可以在地圖內使用箭頭函數來處理單擊事件並傳遞必要的參數:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={(e) => this.onItemClick(e, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

或者，如果您希望保留事件對象，則可以僅綁定必要的參數：

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

以上是為什麼我在我的 React 應用程式中收到「不變違規：物件作為 React 子項無效」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！