避免对象变异

时间:2017-02-23 13:17:08

标签: javascript reactjs ecmascript-6

我正在使用React和ES6。所以我得到了以下情况:我有一个状态,其中一个对象数组假设a = [{id: 1, value: 1}, {id: 2, value: 2}]状态为Object A,然后我将列表传递给Object B,{{1 (在构造函数中)将列表复制到它自己的状态并调用一个使用Object B函数的函数,其中我返回map(向每个对象添加b = [{id: 1, value: 1, text: 'foo'}, {id: 2, value: 2, text: 'foo'}]),所以它虽然它并没有在(text, value)中改变a,但确实如此。

所以我做了一些测试:

Object A

所以根据我的假设const a = [{id: 1, value: 1}, {id: 2, value: 2}] // suppose it is in object A addText = (list) => { return list.map((item) => {item.text = "foo"; return item}) } const b = addText(a) // suppose it is in object B a !== ba变异,所以他们是平等的。

在大型项目中,程序员会犯错误(我在这里做过!)如何处理这种情况以避免以这种方式改变对象? (该示例尝试将addText表示为a state,这是来自React的组件

1 个答案:

答案 0 :(得分:2)

如果您对对象的更改非常浅(位于对象的顶层),则可以使用Object.assign({}, oldObj, newObj),或者如果您在babel中启用了Object spread proposal,则{{1} }

要在团队中强制执行此操作,您可以在启用了{ ...oldObj, newThing: 'thing' }规则的情况下使用此ESLint插件https://github.com/jhusain/eslint-plugin-immutable