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 }
    }))

  }

保留事件的值。