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