我创建了一个Checklist组件,其中所有检查都是默认的FALSE
,当我单击以检查任何一个我设置 Component State 并将 State 发送到Store reducer
. 这样做之后,问题就来了。问题是:-我希望MyComp
借助 . 将数据存储在另一个 Component() 中mapStateToProps
。但是componentWillReceiveProps
当我更改清单数据时不会触发。
我搜索了这个问题,发现React 无法对即将到来的 props 进行深度检查。我尝试使用单个toggle(true/false)
道具,它对我有用。
这是 MyComp.js,它使用 Store State(toggle, platforms) 作为道具
class MyComp extends React.Component{
componentWillReceiveProps=(nextProps)=>{
console.log(nextProps);
// this function is running only when the toggle is changing but not running when I change CheckList State.
}
render()(<div></div>);
}
const mapStateToProps = (State) => {
return {
platforms:State.configuration.platforms!==undefined?State.configuration.platforms:[],//<-- Not triggered componentWillReceiveProps
toggle:State.toggle //<-- it triggered componentWillReceiveProps
}
}
export default connect(mapStateToProps)(FeatureEvents);
...
这是来自商店的道具。在这个唯一选定的属性正在改变。
platforms props : [
{
background: "https:image/file/59fd566788f3ac79a46ef20d/Android.png",
description: "Operating system used by various brands",
icon: "https://duj87royd3ze0.cloudfront.net/uploads/image/android.png",
id: "587f1e2f14c49f4aeb4d79d4",
price_multiplier: 1.5,
selected: true,
title: "Android",
week_multiplier: 1.1,
},
{..},
...
{..}
]
预期:当我在 CheckList 中通过选中或取消选中更改“ selected ”属性值(true/false)时,我想在MyComp中触发 componentWillReceiveProps 。
当前状态:反应未触发 componentWillReceiveProps。因为 React 无法识别深度检查。
我如何编写代码以便 React 开始深入检查即将推出的道具?