react子组件接收的props赋值给state的陷阱问题
更新时间：2024年03月14日 10:57:12 作者：lixiaonaaa
这篇文章主要介绍了react子组件接收的props赋值给state的陷阱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react子组件接收的props赋值给state的陷阱
一般情况下，子组件接收到父组件传来的props
当做变量直接用就可以，但是个别情况下子组件需要将props赋值给state。
一开始，按照常规写法
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {
list: props.list
}
}
}会发现，页面会重新渲染，但是页面数据并没有变化。
这涉及到要熟悉react的生命周期（图片来自于jianshu.com/p/b331d0e4b398，深表感谢）
当父组件更新导致子组件更新时
子组件的生命周期执行顺序是
componentWillReceiveProps --> shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate
也就是说子组件刷新的时候，不再执行constructor
当然也就不会对state重新赋值，所以子组件虽然执行了render，但是渲染数据不变。
解决此问题并不难
就是在componentWillReceiveProps中重新对state赋值，即可。
componentWillReceiveProps(props) {
this.setState({
list: props.list
})
}只有类组件有此问题，函数组件没有此问题。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解antd+react项目迁移vite的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了React hooks useState异步问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
React如何使用create-react-app创建react项目
这篇文章主要介绍了React如何使用create-react-app创建react项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
思路其实没有那么复杂，把地图想成一个盒子容器，地图中心点想成盒子中心点；扎点在【地图中心点】不会动，当移动地图时，去获取【地图中心点】经纬度，设置某个位置的时候，将经纬度设置为【地图中心点】即可2021-06-06
react反向代理使用http-proxy-middleware问题
这篇文章主要介绍了react反向代理使用http-proxy-middleware问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
某些情况下需要在典型数据流外强制修改子代。要修改的子代可以是 React 组件实例，也可以是 DOM 元素。这时就要用到refs来操作DOM，本文详细的介绍一下使用，感兴趣的可以了解一下2021-06-06
详解在create-react-app使用less与antd按需加载
这篇文章主要介绍了详解在create-react-app使用less与antd按需加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了React Hook 监听localStorage更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
React是一个用于构建用户界面的JavaScript库,下面这篇文章主要给大家介绍了关于React组件化的一些额外知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了React Native提供自动完成的下拉菜单的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论