避免物體突變

我正在使用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

避免物體突變

回答

相關問題