TypeError：evt.target在函数setState中为null

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

使用updater函数作为第一个参数。

第二：

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

使用要更新的对象

在更新程序功能中使用综合事件时，需要使用 event.persist()

从 文档中 ：

SyntheticEvent被合并。这意味着在调用事件回调之后，将重新使用SyntheticEvent对象，并且所有属性都将无效。这是出于性能原因。因此，您不能以异步方式访问事件。

如果要以异步方式访问事件属性，则应在事件上调用event.persist（），这将从池中删除综合事件，并允许用户代码保留对该事件的引用。

你的拳头盒看起来像

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

PS： 仅当您希望基于prevState或更新当前状态时，才应为setState使用updater函数。props

CodeSandbox