0

我创建了一个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 开始深入检查即将推出的道具?

4

0 回答 0