React之正确修改state

Posted 2023-03-16

参考技术A state可以通过this.state.属性的方式直接获得，但当修改state时，往往有很多陷阱需要注意。下面介绍常见的三种陷阱。

直接修改state，组件并不会重新触发render，例如：

正确的修改方式是使用setSate();

很多开发刚开始没有注意到 setState 是异步的。如果你修改一些 state ，然后直接查看它，你会看到之前的 state 。这是 setState 中最容易出错的地方，如：

另外，需要注意的是props的更新也是异步的。
如果需要在 setState 后直接获取修改后的值,可以使用回调函数，setState 方法接收一个 function 作为回调函数。这个回调函数会在 setState 完成以后直接调用，这样就可以获取最新的 state 。如：

当调用setState修改组件状态时，只需要传入发生改变的state，而不是组件完整的state，因为组件state的更新是一个合并的过程。例如，一个组件的状态为：

当只需要修改title时，将修改后的title传给setState即可：

React会合并新的title到原来的组件状态中，同时保留原来的状态content，合并后的state为：