如何在反应中设置 object 的 object

Question

我希望有人能给我一些 syntax/explanation 帮助我正在尝试调用 setState 上的 object 嵌套在 object （数据）在我的状态下有点难过？

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

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

这是我正在使用的状态：

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

这是我的函数，我尝试将 child 添加到我的 children [] 数组中，该数组嵌套在我的数据 object 中，状态为：

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
      }
    }
  }

Answer 1

你可以试试这样的

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

                }))

Answer 2

由于它嵌套得很深，所以应该像下面的代码片段那样做。

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)

上面的代码片段使用了扩展运算符。如果您以前没有见过它，它是一个新的 JavaScript 运算符，它会非常方便。 (MDN link)

我不确定您为什么在代码片段不使用挂钩时添加注释 //use setState to add a child。如果状态对象嵌套如此之深，我认为钩子或任何其他状态管理工具将是有益的。

如何在反应中设置 object 的 object

how to setState an object of an object in react

arrays

object

react-state-management