state更新不生效之——派生状态

最新推荐文章于 2023-12-28 15:14:11 发布

咩咩羊10

最新推荐文章于 2023-12-28 15:14:11 发布

阅读量335

点赞数

分类专栏： react-最美的语言踩坑专辑文章标签： react

本文链接：https://blog.csdn.net/m0_38073011/article/details/115010198

版权

本文探讨了React中派生状态导致更新不生效的原因，澄清了关于getDerivedStateFromProps和componentWillReceiveProps的误解，并通过代码示例展示了常见问题。文章指出，直接复制props到state以及条件性地更新state可能导致派生状态bug，建议参照官方文档寻找解决方案。

摘要由CSDN通过智能技术生成

原因

一个派生 state 值[num]也被 setState 方法更新时，这个值就不是一个单一来源的值了。

误解

getDerivedStateFromProps 和 componentWillReceiveProps 只会在 props “改变”时才会调用。实际上只要父级重新渲染时，这两个生命周期函数就会重新调用，不管 props 有没有“变化”。

在这两个方法内直接复制props 到 state 是不安全的。这样做会导致 state 后没有正确渲染。

demo 示例

如下代码，可以自己本地跑一遍，无论怎么点击按钮，数字一直是1，setState并未生效


  
    class Children extends React.Component  {
   
    	constructor(props) {
   
		    super(props)
		    this.state = {
   
		      num: props.num
		    }
		}
		handleClick = () => {
   
        	this.</