как установитьState объект объекта в реакции

Question

Я надеюсь, что кто-то может дать мне некоторую помощь по синтаксису / объяснению здесь. Я пытаюсь вызвать setState для объекта, вложенного в объект (данные) в моем состоянии. Я немного озадачен?

Я не уверен, как на самом деле положить sh мой объект в указанный массив в функции 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

Так как он вложен глубоко внутрь, то должен делать что-то вроде следующего фрагмента кода.

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, когда во фрагменте кода не используются хуки. Я думаю, что хуки или любой другой инструмент управления состоянием был бы полезен, если бы объект состояния был так глубоко вложен.

Answer 2

Вы можете попробовать что-то вроде этого

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

                }))