javascript - React JS setState 行为

Question

我正在关注本教程，并在 1:10:18（链接中包含的时间步长）他写道this.setState({ count: this.state.count + 1 }); （其中 count 是状态对象内的原始值，然后在按钮单击后显示在页面上）从导师的话我明白我们需要在 setState中指定count:，以便 React 更新 state 对象中的这个值。但我注意到我可以在 setState 中写一些废话，例如：

  handleIncrement = key => {
    this.state.totalCount += 1;
    this.state.tags[key] += 1;
    this.setState({ countBlabla: 23213123 });
  };

并且 HTML 仍然会正确更新，而无需重新渲染所有内容。（我已经检查了开发人员工具，只更新了更改的值，其他所有内容都保持不变）

我也试过：this.setState({});效果很好。但this.setState();没有。

那么传递 setState 参数有什么意义呢？

标签： javascriptreactjs

Answer 1

唯一可以直接写入的地方this.state应该是 Components 构造函数。在所有其他地方，您应该使用this.setState函数，它将接受一个最终将合并到组件当前状态的对象。

虽然在技术上可以通过直接写入来更改状态this.state，但这不会导致组件使用新数据重新渲染，并且通常会导致状态不一致。

此外，它是 async 函数，因此如果您只是在调用新状态后this.setState()尝试进入新状态，您将不会立即看到更改。console.log()相反，您可以传递一个回调函数this.setState({var: newVar}, () => {console.log(this.state)})。