Реагируйте на хуки useState () с Object - PullRequest
Новая
       8

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

0 голосов
/ 11 января 2019

Как правильно обновлять состояние, является ли вложенный объект в 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"
           }
        }
   })

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

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

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

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

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

0 голосов
/ 11 января 2019

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

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