Question

我正在研究JSON对象的三个属性，这些属性返回布尔值。

updateChange=(value) =>{
    //Making copy of existing json Object
    let newState = JSON.parse(JSON.stringify(this.state.mainValue));
    // chaning property of cellular over here
    newState.cellular = value;
    console.log(newState);
    this.setState({mainValue:newState});

    //I tried setState in many different ways. But Component is not changing state value 

    console.log(this.state.mainValue)
};

我发现了为什么会这样。我在此组件中使用getDerivedStateFromProps来查看父级所做的更改以更新值。这样可以避免更改孩子的状态。因此，我创建了一个称为“先前状态”的状态，以比较先前的道具和从父级到渲染的当前道具。这样可以避免组件在本地状态值更改时刷新。

 static getDerivedStateFromProps(propsnow,state){

  if(state.previous !== propsnow.detailSwitches){
   return{
        previous :propsnow.detailSwitches,
        cellular: propsnow.detailSwitches.cellular,
        wifi1: propsnow.detailSwitches.wifi1,
        wifi2: propsnow.detailSwitches.wifi2
   };

    }
    return null;
 }

任何示例或更好的做法都将有所帮助。谢谢

Answer 1

您仅将状态的“ mainValue”变量设置为newstate的值，是否不应该更新整个状态？

this.setState({...newState})

Answer 2

您可以尝试

  this.setState(prevState => ({
    mainValue: {
       ...prevState.mainValue,
      cellular: value
  }}))

这是一种不变的状态更新方式。

在jsonObject的属性上调用setState时，React Component状态值未更新

2 个答案: