Question

我正在尝试将数组添加到包含数组的状态。我希望将数据添加到数组的末尾。我的数据如下：

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

我希望更新name变量以包含某些内容。例如，添加{program：“Text Editor”}

我怎么能用this.setState（）来做这件事？或者，如果没有，还有另一种方法可以做到这一点。我读了大约$ push但是找不到任何帮助我的例子。我希望在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。

React：数组和不变性助手

2 个答案: