如何更新嵌套状态的嵌套对象属性Reactjs？

问题描述：

showAllPics(docid){ 

     console.log(docid) 
     var newSelected = Object.assign({},this.state.CompetitorPhotos); 

     console.log("b4-->",newSelected[docid]['display']); 
     newSelected[docid]['display'] = true; 
     console.log("after -->",newSelected[docid]['display'],newSelected); 

     console.log(newSelected,this.state.CompetitorPhotos) 

     this.setState({ CompetitorPhotos: newSelected },function(){ 
      console.log(newSelected,this.state.CompetitorPhotos) 
     }); 

    }

我正在尝试更新reactjs状态的嵌套属性中的'display'属性。下面的代码失败......我在做什么错..如何更新嵌套状态的嵌套对象属性Reactjs？

console.log("after -->",newSelected[docid]['display'],newSelected); 
    results in "after -->",true, newSelected.docid.display remains false

Object.assign（{}）不深拷贝，所以你在做newSelected的时候基本上变异的状态[文档ID] [“显示”] =真正;你可以使用像这样的东西：lodash中的cloneDeep为了根据需要更新你的状态https://lodash.com/docs/4.17.4#cloneDeep –

你可以用一些虚拟数据创建一个jsbin/jsfiddle –

答

重要的是要注意到这里（从https://facebook.github.io/react/docs/react-component.html#setstate）：

的setState（）不总是立即更新组件。 它可能会批或推迟更新，直到后来。这使得在调用setState（）之后立即读取this.state 是一个潜在的错误。

答

您可以更新嵌套的状态... 只要看看这个问题：react set state in for nested state

return { 
    ...state, 
    fetching: false, 
    fetched: true 
}

答

对不起，回答了第二次。下面是一个例子，如何更新嵌套店阵营：

this.setState({test: {one: 'asdasdasd'}},() => { 
     let { test } = this.state 
     const second = {two: 'zwei'} 
     Object.assign(test, second) 
     this.setState({ 
      test, 
     },() => { 
      console.log(this.state) 
     }) 
    })

如何更新嵌套状态的嵌套对象属性Reactjs？

相关推荐