setState не работает при использовании объекта, который был скопирован из оператора распространения

#reactjs #copy #setstate

Вопрос:

У меня есть следующие коды, и он не работает и показывает мне только «неопределенное» значение объекта ориентации, как и раньше.

 let insertDataObj = {...this.state.orientation};
insertDataObj.startTime = "03";
this.setState({
    orientation: insertDataObj,
});
 

однако следующие коды работают как заклинание и показывают мне значение «03» объекта ориентации, как я и предполагал.

 let insertDataObj = this.state.orientation.
insertDataObj.startTime = "03";
this.setState({
    orientation: insertDataObj,
});
 

Итак, я совершенно сбит с толку результатом. Я слышал, что копирование объекта с помощью оператора распространения должно быть намного более безопасным и чистым кодом, чем простой метод копирования, и я действительно думал, что это сработает как заклинание, но это не работает.
Это почему?

Комментарии:

1. Не могли бы вы это сделать orientation: { ...this.state.orientation, startTime: "03" } ?

2. Предложение, которое вы загрузили выше, также не работает. Я не понимаю, почему.

Ответ №1:

Привет, Похоже, вы неправильно распределили состояние; Когда вы распространяете { …this.state.orientation}, вы получаете объект, который выглядит так.

 { startTime: "02" };
rather than
{ orientation: { startTime: "02" } };
You should have done
{ ...this.state };
 

Кроме того, было бы действительно хорошей идеей использовать функциональное состояние набора для уменьшения кода и потенциальных мутаций, подобных этому.

 this.setState((state) => ({
   orientation: { ...state.orientation, startTime: "03" },
}));