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
})
}只有类组件有此问题，函数组件没有此问题。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了关于react useState更新异步问题，具有很好的参考价值，希望对大家有所帮助。以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。2022-08-08
useEffect是React中的一个钩子函数,用于处理副作用操作,这篇文章主要为大家介绍了React中useEffect函数的具体用法,希望对大家有所帮助2023-08-08
Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料，需要的朋友可以参考借鉴。2017-07-07
React-Hooks之useImperativeHandler使用介绍
这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
react-native 配置@符号绝对路径配置和绝对路径没有提示的问题
本文主要介绍了react-native 配置@符号绝对路径配置和绝对路径没有提示的问题,文中通过图文示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
React-router v6在Class组件和非组件代码中的正确使用
这篇文章主要介绍了React-router v6在Class组件和非组件代码中的正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在现代前端开发中,性能优化是一个不可忽视的重要环节,在 React 生态系统中,React Profiler 是一个强大的工具,下面我们来看看如何使用它来提升我们的 React 应用吧2025-03-03
基于Cloud Studio构建React完成点餐H5页面(腾讯云 Cloud Studio 实战训练营)
最近也是有机会参与到了腾讯云举办的腾讯云Cloud Studio实战训练营，借此了解了腾讯云Cloud Studio产品,下面就来使用腾讯云Cloud Studio做一个实战案例来深入了解该产品的优越性吧,感兴趣的朋友跟随小编一起看看吧2023-08-08
这篇文章主要介绍了React如何实现全屏监听Esc键，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
React如何解决fetch跨域请求时session失效问题
这篇文章主要给大家介绍了关于React如何解决fetch跨域请求时session失效问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
最新评论