在 setState 中使用函数返回对象和直接使用对象有什么区别？答案

【问题标题】：What's the difference between using a function to return an object in setState and using an object directly?在 setState 中使用函数返回对象和直接使用对象有什么区别？
【发布时间】：2020-05-07 18:53:41
【问题描述】：

在下文中，当我在 setState 中使用函数返回对象时，handleChange 方法会抛出错误，但当我将 inputvalue 直接更新为对象时工作正常

   class App extends React.Component {
  constructor (props) {
      super(props);
      this.state = {
          inputvalue: ''
      }
      this.handleChange = this.handleChange.bind(this);
  }

  handleChange (event) {
    event.preventDefault();
    this.setState(() => {
      return {inputvalue: event.target.elements.name.value}//throws an error but works fine if I use just use object with out using a functon to return
    }       
    );
  }

  render() {
    return (
      <div>
          <form onSubmit={this.handleChange}>
              <label>Name  </label>
              <input type="text" name="option"  />
              <button>submit</button>
          </form>
         <p> {this.state.inputvalue}</p>
      </div>
    );
  }
}

render(<App />, document.getElementById('app'));

发生的警告：

警告：出于性能原因，此合成事件会被重复使用。如果你看到这个，你正在访问方法stopPropagation 在一个释放/无效的合成事件上。这是一个无操作功能。如果您必须保留原始合成事件，请使用 event.persist()。请参阅https://reactjs.org/docs/events.html 了解更多信息。

【问题讨论】：

错误是什么？
我在您的帖子中没有看到任何错误文本，请进行编辑。更实际的说明是，您为什么要返回任何内容？ setState 完全忽略状态更新后回调的函数返回。如果您需要访问要返回的值，那就是字面意思组件状态已经用于：更新状态后不要返回它，使用该值更新状态 i> 以 =) 开头

标签： reactjs

【解决方案1】：

基于此：

SyntheticEvent 是池化的。这意味着 SyntheticEvent 对象将被重用，并且所有属性都将在事件回调已被调用。这是出于性能原因。作为因此，您不能以异步方式访问事件。

如果你想以异步方式访问事件属性，你应该在事件上调用 event.persist()，这将删除池中的合成事件，并允许对该事件的引用由用户代码保留。

当使用函数作为更新器时，你应该调用persist方法。

handleChange (event) {
    event.persist();

    this.setState(() => {
        ...
    }
}

看看这个答案：

TypeError: evt.target is null in functional setState

【讨论】：

超级有用，persist 方法使错误消失。我还必须使用代码编辑器中的 preventDefault 立即刷新。谢谢。

【解决方案2】：

我认为你在这里访问错误：

event.target.elements.name.value

应该是

event.target.elements.option.value // because u set the name attribute to option (name="option") on the input element

如果我没记错的话，错误是你试图访问空引用吗？

【讨论】：

谢谢，这是一个错字，应该是选项。没有解决最初的问题，但绝对没有帮助我犯了那个错字:)