Блог

Если у вас есть массив объектов в состоянии:

 state = {
    people = []
};
 

и в какой-то момент я каким-то образом обновляю его, используя immer:

 updatePeople = () => {
    this.setState(produce(draft => {
       draft.people.forEach(p => p.age = 30);
    }));
};
 

и в моем рендеринге мне нужно внести изменения для целей отображения:

 render = () => {
    const people = [...this.state.people];
    people.forEach(p => p.age  = 2);

   return <DataTable data={people} />
}
 

Тогда я столкнусь со следующей ошибкой

 Cannot assign to read only property 'age' of object '#<Object>'
 

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

 const people = this.state.people.map(p => {...p});
 

однако это может привести к путанице со сложными объектами. В качестве альтернативы я мог бы полностью отключить замораживание, но это похоже на плохой дизайн.

 setAutoFreeze(false)
 

Каков наилучший способ справиться с этой ситуацией?