javascript - 类型错误 : Cannot read property 'name' of null

标签 javascript reactjs

我有一个用户对象,他们可以在其中编辑他们的信息(电话号码、电子邮件等)

我无法在 setState 回调中访问输入的 name 并不断收到 TypeError: Cannot read property 'name' of null

但是,当我记录 event.target.name 时,它显示在那里。

当我改变一个简单的状态时,它起作用了:

假设状态值与目标名称相同。

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

我正在关注 this发布以更新用户对象。

抱歉,如果这是重复的,我找不到我要找的东西。

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

  }

编辑:我像这样在类构造函数中正确绑定(bind)它:

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

最佳答案

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

  }

来自文档:link

其他解决方案:

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

  }

保留事件的值。

关于javascript - 类型错误 : Cannot read property 'name' of null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46371648/

相关文章:

javascript - 刷新数组对象时出错

javascript - 等待请求结束FullScreen

Javascript:将 "this"作为 "dom"对象传递,而不是将 "this"作为 "this"函数传递

javascript - 无法从单独的模块分派(dispatch)命名空间操作 : [vuex] unknown action type

javascript - 如何在ReactJS中设置将两个函数添加到 'onchange's

javascript - 谷歌地图不显示,HTML

reactjs - 使用 React 将类更改为元素

reactjs - 文件上传不适用于按钮单击 Material -UI V1 ReactJs

reactjs - React Native 本 map 片加载缓慢

javascript - 如何使用 Material-UI 将排版主题默认值应用于常规标签?