如何在反应中设置对象的对象答案

【问题标题】：how to setState an object of an object in react如何在反应中设置对象的对象
【发布时间】：2020-05-19 20:48:15
【问题描述】：

我希望有人可以在这里给我一些语法/解释帮助我试图在我的状态下对嵌套在对象（数据）中的对象调用 setState 我有点难过？

我不确定如何将我的对象实际推送到 setState 函数中的指定数组上？

有人可以帮帮我吗？非常感谢！

这是我正在使用的状态：

state={
    height: 50,
    parentCount: 1,
    data: 
      {
        parentId: 0,
        name: 'parent',
        children: [{name: 'Child One', distToWater: 0, children: [] }, {name: 'Child Two', distToWater: 0, children: [] }]
      },   
  }

这是我的函数，我尝试将一个子对象添加到我的 children [] 数组中，该数组嵌套在我的状态数据对象中：

addChild = () =>{

    for (let x in data.children ){
      for (child in x){
          let closest = 99999

          if(child.distToWater < closest){
              closest = child.distToWater
              var newBest = child 

              let newChild = { 
                name: 'child',
                distToWater: closest - 1,
                children: []
              }
          }


          this.setState({data.children[newBest]: [...newChild] }) //use setState to add a child object
      }
    }
  }

【问题讨论】：

标签： arrays object react-state-management

【解决方案1】：

由于它嵌套在内部深处，所以应该像下面的代码 sn-p 那样做。

const kid = { name: 'John', distToWater: 0, children: [] } // new object to add
const newChildren = [...this.state.data.children, kid]
const newData = { ...this.state.data, children: newChildren }
const newState = { ...this.state, data: newData }
this.setState(newState)

上面的代码sn-p使用了展开操作符。如果您以前没有见过它，它是一个新的 JavaScript 运算符，非常方便。 (MDN link)

当代码 sn-p 不使用钩子时，我不确定您为什么要添加注释 //use setState to add a child。如果状态对象嵌套得这么深，我认为钩子或任何其他状态管理工具会很有用。

【讨论】：

【解决方案2】：

你可以试试这样的

  this.setState(prevState => ({
                    ...prevState,
                    data: {
                        ...prevState.data,
                        children: [...prevState.data.children, newBest]
                    }

                }))

【讨论】：