避免对象突变

我正在使用 React 和 ES6。所以我遇到了以下情况：我有一个带有对象数组的状态假设a = [{id: 1, value: 1}, {id: 2, value: 2}]处于以下状态Object A，然后我将列表传递给Object B通过道具，Object B（在构造函数中）将列表复制到其自己的状态并调用正在使用的函数map我返回的函数b = [{id: 1, value: 1, text: 'foo'}, {id: 2, value: 2, text: 'foo'}] (added (text, value)每个对象），所以它虽然没有变异a in 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, but a被突变为addText，所以它们是相等的。

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

如果您对对象的更改确实很浅（在对象的顶层），您可以使用Object.assign({}, oldObj, newObj)，或者如果您有对象传播提案 https://babeljs.io/docs/plugins/transform-object-rest-spread/在 babel 中启用，{ ...oldObj, newThing: 'thing' }

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