在React setState函数中使用e.target.value的问题

Question

我在React中遇到一个奇怪的问题。我想我可能还没有完全了解React的工作原理，并且非常感谢您的帮助。

请在我的React组件下面找到：

class myComponent extends Component {
  state = {
    value: ''
  }

  updateValue = e => {
    this.setState({
      value: e.target.value
    })
  }

  render() {
    return (
     <form>
      <input type="text" onChange={this.updateValue} defaultValue={this.state.value} />
     </form>
    )
  }
}

然后，现在，如果我在文本字段中键入内容，则会收到以下警告和错误：

警告：出于性能原因，此合成事件已被重用。如果看到此消息，说明您正在通过已target发布/无效的综合事件访问该属性。设置为空。如果必须保留原始的合成事件，请使用event.persist（）。

未捕获的TypeError：无法读取null的属性“值”

但是，如果我将'updateValue'方法更改为：

updateValue = e => {
    const newValue = e.target.value
    this.setState({
      value: newValue
    })
  }

它将正常工作。

Answer 1

更新的答案

正如@FelixKling指出的那样，我的回答并不完全正确。我的答案仅在将函数作为参数传递给时才有效setState，而不是像问题中那样传递对象时才有效。

如果将对象传递给setState，则将立即对参数求值，即在事件无效之前。因此，不会发生上述错误。

如果将函数传递给setState，则该参数将在该函数中求值，该参数将在updateValue完成/返回并且事件无效后发生。如果将函数传递给setState，则必须e.target.value在e.persist()之前将其存储在变量（或调用）中setState。

旧的（略有错误）答案

发生此问题的原因（如错误消息所述）在回调（您的updateValue函数）完成时将事件设置为null 。

因为this.setState()是异步函数，所以不会立即执行。结果，this.setState()实际上是在您updateValue完成操作之后执行的，因此在事件被取消之后也是如此。

您的解决方案实际上是React文档中建议的方法！