React 中,如果state中有一个较深层的值改变了,怎么去setState

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 中,如果state中有一个较深层的值改变了,怎么去setState相关的知识,希望对你有一定的参考价值。

参考技术A 可以直接使用react的immutability helpers var update = require('react-addons-update'); var newData = update(this.state, c: d: 1: e: $set: 3); this.setState(newData)

React之正确修改state

参考技术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为:

以上是关于React 中,如果state中有一个较深层的值改变了,怎么去setState的主要内容,如果未能解决你的问题,请参考以下文章

react中setState为何使用不可变值

React 修改获取state中的值

react-hooks

[react] componentWillUpdate可以直接修改state的值吗

React setState注意事项

React之正确修改state