避免对象突变

Question

我正在使用 React 和 ES6。a = [{id: 1, value: 1}, {id: 2, value: 2}]所以我遇到了以下情况：我有一个状态，其中包含假设处于 状态的对象数组Object A，然后我将列表传递给Object Bprops，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 !== b，但是a被 变异了addText，所以它们是相等的。

在大型项目中，程序员会犯错误（我在这里犯了！）应该如何处理这种情况以避免以这种方式改变对象？（该示例尝试将afor 表示state为Object AReact 中的一个组件）

Answer 1

如果您对对象的更改确实很浅（在对象的顶层），您可以使用Object.assign({}, oldObj, newObj)，或者如果您在 babel 中启用了对象传播建议，{ ...oldObj, newThing: 'thing' }

要在团队中强制执行此操作，您可以使用此 ESLint 插件https://github.com/jhuusain/eslint-plugin-immutable并no-mutation启用规则。