Javascript ReactJS无法读取属性'；名称'；空的

我想知道为什么当我开始键入时，这个.setState函数会给出这个错误。 我正在使用箭头功能进行同样的操作。它给我的错误是“无法读取null的属性”name“。 但当我使用简单直接的方式改变状态时，它就起作用了

这是我的密码：

class UpstreamForm extends Component {

    state = {
        name: '',
        email: ''
    }

    onSubmitHandler() {
        this.props.changeData(this.state)
    }

    changeHander(event) {
        this.setState((state) => {
            return {
                [event.target.name] : event.target.value
            }
        })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmitHandler.bind(this)}>
                    <input 
                    type="text"
                    placeholder="name"
                    name="name"
                    onChange={this.changeHander.bind(this)}
                     />
                     <input 
                    type="text"
                    placeholder="email"
                    name="email"
                    onChange={this.changeHander.bind(this)}
                     />
                     <button>Submit!</button>
                </form>
            </div>
        )
    }

}

---

它应该会起作用。我认为前一个正在删除你现有的状态。在更新新状态时，只需保持以前的状态

changeHander(event) {
    this.setState((state) => {
        return {
            ...state,
            [event.target.name] : event.target.value
        }
    })
}

---

它成功了，谢谢@Al-Aoutar Hamza

根据React docs，在调用事件回调后，所有属性都将无效。 因此，您不能以异步方式访问事件

解决方案： 在使用回调函数时，应该对事件调用event.persist（）

 changeHander(event) {
        event.persist();
        this.setState((state) => {
            return {
                [event.target.name] : event.target.value
            }
        })
    }

---

这回答了你的问题吗？只需将

名称

和

值

放在

changeHander

范围内的局部变量中（在处理程序中也键入）。您不需要事件，因此不需要使用persist。@Emilebergron的解决方案是解决此问题的首选方法。

 changeHander(event) {
        event.persist();
        this.setState((state) => {
            return {
                [event.target.name] : event.target.value
            }
        })
    }