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+Redux实现简单的待办事项列表ToDoList
这篇文章主要为大家详细介绍了React+Redux实现简单的待办事项列表ToDoList，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Refs是一个 获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下2021-07-07
关于getDerivedStateFromProps填坑记录
这篇文章主要介绍了关于getDerivedStateFromProps填坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了react 位运算符，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
React Native基础入门之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是属于web前端领域CSS的一种布局方案，下面这篇文章主要给大家介绍了关于React Native基础入门之初步使用Flexbox布局的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了使用React-Router时出现的错误及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍了使用React和Ant Design库构建的待办任务列表应用,它包含了可编辑的表格,用户可以添加、编辑和完成任务,以及保存任务列表数据到本地存储,文中有相关的代码示例,需要的朋友可以参考下2023-08-08
react-redux中connect的装饰器用法@connect详解
这篇文章主要介绍了react-redux中connect的装饰器用法@connect详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家介绍了ahooks useRequest的源码精读解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
Hooks 是一种函数，该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。 Hooks 在类内部不起作用 - 它们允许你无需类就使用 React，本文带领大家学习React 小技巧教你如何摆脱hooks依赖烦恼，感兴趣的朋友一起看看吧2021-05-05
最新评论