Подтвердить что ты не робот

Реагируйте на хуки useState() с Object

Как правильно обновлять состояние, является ли вложенный объект в React with Hooks?

export Example = () => {
  const [exampleState, setExampleState] = useState(
  {masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b"
           fieldTwoTwo: "c"
           }
        }
   })

Как бы один использовать setExampleState для обновления exampleState к (добавление поле)? a

const a = {
masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b",
           fieldTwoTwo: "c"
           }
        },
  masterField2: {
        fieldOne: "c",
        fieldTwo: {
           fieldTwoOne: "d",
           fieldTwoTwo: "e"
           }
        },
   }
}

b (изменение значений)?

const b = {masterField: {
        fieldOne: "e",
        fieldTwo: {
           fieldTwoOne: "f"
           fieldTwoTwo: "g"
           }
        }
   })

Ответ 1

Вы можете передать новое значение, как это

  setExampleState({...exampleState,  masterField2: {
        fieldOne: "c",
        fieldTwo: {
           fieldTwoOne: "d",
           fieldTwoTwo: "e"
           }
        },
   }})

Ответ 2

Как правило, вы должны следить за глубоко вложенными объектами в состоянии React. Чтобы избежать неожиданного поведения, состояние должно быть постоянно обновлено. Когда у вас есть глубокие объекты, вы в конечном итоге клонируете их для неизменности, что может быть довольно дорогостоящим в React. Зачем?

После глубокого клонирования состояния React пересчитает и повторно отобразит все, что зависит от переменных, даже если они не изменились!

Поэтому, прежде чем пытаться решить вашу проблему, подумайте, как вы можете сначала сгладить состояние. Как только вы это сделаете, вы найдете прекрасные инструменты, которые помогут справиться с большими состояниями, такие как useReducer().

Если вы подумали об этом, но все еще уверены, что вам нужно использовать глубоко вложенное дерево состояний, вы все равно можете использовать useState() с такими библиотеками, как immutable.js и Immutability-helper. Они упрощают обновление или клонирование глубоких объектов, не беспокоясь об изменчивости.