TypeError：無法讀取null的屬性“名稱”

Question

我有一個用戶對象，他們可以在其中編輯信息（電話號碼，電子郵件等）

我無法在setState回調中訪問輸入的name ，並不斷獲取TypeError: Cannot read property 'name' of null

但是，當我記錄event.target.name它顯示在那里。

當我更改一個簡單狀態時，它會起作用：

假設狀態值與目標名稱相同。

this.setState({ [event.target.name]: value });

我正在關注這篇文章以更新用戶對象。

抱歉，如果重復的話，我找不到我想要的東西。

  handleUserChange(event) {
    console.log(event.target.name);
    const value = event.target.value
    this.setState(prevState => ({
      user: {...prevState.user, [event.target.name]: value }
    }))

  }

編輯：我將其正確綁定在類構造函數中，如下所示：

contructor(props) {
    super(props);
    ...
    this.handleUserChange = this.handleUserChange.bind(this)
}

Answer 1

React正在回收此事件。 因此，對setState的異步調用將不知道event.target.name的值，因為該事件已經消失。 您需要像使用event.target.value一樣復制該值。

 handleUserChange(event) {
    console.log(event.target.name);
    const name = event.target.name;
    const value = event.target.value;
    this.setState(prevState => ({
      user: {...prevState.user, [name]: value }
    }))

  }

從文檔： 鏈接

其他解決方案：

handleUserChange(event) {
    event.persist();
    const value = event.target.value;
    this.setState(prevState => ({
      user: {...prevState.user, [event.target.name]: value }
    }))

  }

保留事件的值。