避免物体突变

我正在使用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'}]（为每个对象添加(text, value)），所以它虽然没有在Object A中变异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突变，所以他们都是平等的。

在一个大规模项目中，程序员犯了错误（我在这里做过！）应该如何处理这种情况以避免以这种方式变异对象？（这个例子试图represet a为state为Object A这是从反应的成分）

来源

2017-02-23 FacundoGFlores

您可以深度复制列表，以便新列表不会引用旧列表。 – aitchnyu

深入克隆实现http://lodash.com/docs#cloneDeep – aitchnyu

FWIW：当我调用一个名为'addText'的函数时，我不希望有副本。这是问题的一部分。你甚至写了“为每个对象添加了（文本，值）”_。这是突变。因此，当你总结“尽管它没有变化”时，很难理解。 – zeroflagL

如果你改变的对象是真的浅（在对象的顶层），你可以使用Object.assign({}, oldObj, newObj)，或者如果你有通天启用Object spread proposal，{ ...oldObj, newThing: 'thing' }

执行本一个团队，你可以使用这个插件ESLint与https://github.com/jhusain/eslint-plugin-immutable启用no-mutation规则。

来源

2017-02-23 13:24:05

谢谢，我使用Object.assign（）结束了，但是可以强制所有程序员使用它来防止突变吗？ – FacundoGFlores

为答案增加了一个建议。 –

我将ESLint插件添加到项目中，但是我遇到了CustomComponent.propTypes问题ESLint正在测试“没有允许对象突变”，但它是React的事情，关于在React项目中应用此linter的任何想法？ – FacundoGFlores

避免物体突变

回答

相关问题