reactjs - TypeError : evt. 目标在功能 setState 中为空

Question

这两个函数之间的主要区别是什么？

handleOnChange(evt) {
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}

handleOnChange(evt) {
    this.setState({ tickerName: evt.target.value });
}

为什么直接改变状态的 handleOnChange() 函数可以正常工作？

<input
    type="text"
    value={this.state.tickerName}
    onChange={(evt) => this.handleOnChange(evt)} 
/>

当我使用第一个通过回调更改状态的函数时，出现此错误:

TypeError: evt.target is null

Answer 1

setState 有两种不同的语法

首先:

handleOnChange(evt) {
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}

使用更新函数作为第一个参数。

第二个:

handleOnChange(evt) {
   this.setState({ tickerName: evt.target.value });
}

使用要更新的对象

在更新函数中使用合成事件时需要使用event.persist()

来自 documentation :

the SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

你的第一个案例看起来像

handleOnChange(evt) {
    evt.persist();
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}

或者不使用 event.persist()，您可以将事件存储在另一个对象中

handleOnChange(evt) {
    const value = evt.target.value;
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}

P.S. 仅当您希望根据 prevState 或 props 更新当前状态时，才应使用 setState 的更新程序函数

CodeSandbox