Обновление объекта с помощью useState

Question

Я сейчас использую React и пытаюсь обновить объект состояния.

Я определил переменную состояния и заполнил ее объектом:

const [connections, setConnections] = useState({...platformConnections})

Теперь я хотите обновить этот объект состояния с помощью setConnections (). Но когда я пытаюсь что-то вроде этого:

setConnections({connectionA: {connected: true}})

, я просто обновляю весь объект, когда я регистрирую его.

Как я могу обновить эту переменную состояния и сохранить другие значения до обновления

Answer 1

Вызов setConnections установит полностью новое значение на connections, вы обязаны убедиться, что вы сохраняете значения, которые вы не обновляете.

Например, если вы установили такую ​​строку:

setConnections('new value')

Теперь connections будет иметь new value вместо объекта. При этом, чтобы сохранить предыдущие значения, вам придется либо использовать Object.assign, либо оператор распространения ....

setConnections({
  ...connections,
  connectionA: { ...connections.connectionA, connected: true }
})

, который будет работать в большинстве случаев, однако есть некоторые крайние случаи, когда значение connections может часто меняться и, учитывая, что setConnections работает асинхронно c, вы можете не получать текущие значения и, следовательно, вы можете потерять некоторые данные, чтобы избежать этой проблемы, вы можете использовать функцию для получения сначала текущее состояние, а затем установите нужные значения.

setConnections(prev => ({
   ...prev,
   connectionA: { ...prev.connectionA, connected: true }
  })
)

В этом случае prev имеет текущие значения в любой момент времени, и вы можете смело назначать все, что вам нужно.

Answer 2

То, что вы сделали, перезаписали состояние только с {connectionA: {connected: true}}

Пожалуйста, смотрите https://reactjs.org/docs/hooks-reference.html#functional -обновления

Для обновления состояния на основе значений prev вместе с с помощью оператора распространения

setConnectitions ( prevConnections => ({
  ...prevConnections,
  connectionA: {...prevConnections.connectionA ,connected : true}
}));

В приведенном выше описании prevConnections prop использует предыдущее состояние, а затем создает новый объект с использованием оператора распространения, который состоит из трех точек ..., а затем перезаписывает свойство, которое требуется изменить и установить значение.