如何在反應中設置對象的對象

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 [] 數組中，該數組嵌套在我的數據對象中：

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 鏈接)

當代碼片段不使用鈎子時，我不確定您為什么添加注釋//use setState to add a child 。 我認為如果狀態對象嵌套如此深，鈎子或任何其他狀態管理工具都會很有用。