Question

我希望有人可以在这里给我一些语法/解释方面的帮助，我试图在嵌套状态下嵌套在对象（数据）中的对象上调用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 []数组中添加一个child：

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。我认为，如果状态对象嵌套得很深，则使用钩子或任何其他状态管理工具将是有益的。

如何设置状态对象的反应

2 个答案: