时间戳

首页 > 解决方案 > 使用 immer 时如何更新渲染中的状态对象

reactjs - 使用 immer 时如何更新渲染中的状态对象

问题描述

如果有一组处于状态的对象：

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)

处理这种情况的最佳方法是什么？

标签： reactjsimmer.js

解决方案

推荐阅读