反應：數組和不變性助手

Question

我想將數組添加到包含數組的狀態。我希望將數據添加到數組的末尾。我的數據是這樣的：

getInitialState: function() { 
return {name: [{program: "File Manager"}, 
      {program: "Add File"}, 
      {program: "Index"}, 
      {program: "File Editor"}], 
    program: "Index", 
    display: true}; 
}, 

我希望更新名稱變量也包含的東西。例如，添加{程序：「文本編輯器」}

我怎麼能這樣做this.setState（）？或者，如果沒有，是否有另一種方式來做到這一點。我讀了$推，但無法找到任何幫助我的例子。我想這樣做在componentDidMount：

Answer 1

創建一個新的數組，並將其分配給狀態：

var currentName = this.state.name; 
var newName = currentName.concat([{program: "Text Editor"}]); 
this.setState({name: newName}); 

（第一行是沒有必要的，只是包括爲清楚起見）

您還可以使用的setState功能版本：

this.setState(function(state) { 
    return { name: state.name.concat([{program: "Text Editor"}]) }; 
}); 

如果在一個環境中聯黨是沃茨ES2015 arrows，你可以在一個非常簡潔的方式做到這一點：

this.setState(state => ({ name: state.name.concat([{program: "Text Editor"}]) }); 

由於concat已經生成一個新的數組，你不需要使用immutability helpers，但如果你想，它會是這樣的：

var newState = update(this.state, { // generate a new state object... 
    name: { $push: [ "TextEditor" ] } // with the item pushed onto the `name` key 
}); 

有可能發生變異的this.state現有屬性，然後用setState，例如重新設置

// warning: antipattern! 
this.state.name.push("Text Editor"); 
this.setState({name: this.state.name}); 

，但是這還不算是一個非常好的做法(you should always avoid directly modifying this.state)：

注：

從來沒有直接發生變異this.state，如調用setState()以後可以代替您作出的突變。對待this.state就好像它是不可變的。

Answer 2

您可以閱讀this.state.name數組，修改它（通過推入數組），然後再次調用setState。