React：数组和不变性助手(React: Array and Immutability Helpers)

编程入门行业动态更新时间:2024-10-25 07:32:37

我试图将数组添加到包含数组的状态。我希望将数据添加到数组的末尾。我的数据如下所示：

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

我希望更新名称变量也包含一些东西。例如，添加{program：“Text Editor”}

我怎么能用this.setState（）来做这件事？或者，如果没有，还有另一种方法可以做到这一点。我读了大约$ push但是找不到任何帮助我的例子。我希望在componentDidMount中执行此操作：

I am trying to add an array to a state that contains an array. I wish to add the data to the end of the array. My data looks like this:

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

and I wish to update the name variable to also contain something. For example add {program: "Text Editor"}

How could I go about doing this with this.setState()? Or, if not, is there another way to do this. I read about $push but couldn't really find any examples that helped me out. I wish to do this in componentDidMount:

最满意答案

创建一个新数组并将其分配给状态：

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箭头 ，则可以以非常简洁的方式执行此操作：  
this.setState(state => ({ name: state.name.concat([{program: "Text Editor"}]) });
 
 由于concat已经生成了一个新数组，因此您不需要使用不变性助手 ，但如果您愿意，它看起来像这样：  
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});
 
 但这不是一个很好的做法（你应该总是避免直接修改this.state ） ：  
 
  笔记：  
  永远不要直接改变this.state ，因为之后调用setState()可能会替换你所做的突变。 把this.state看作是不可变的。  
Create a new array and assign it to the state: 
var currentName = this.state.name;
var newName = currentName.concat([{program: "Text Editor"}]);
this.setState({name: newName});
 
(The first line isn't necessary, just included for clarity.) 
You could also use the function version of setState: 
this.setState(function(state) {
  return { name: state.name.concat([{program: "Text Editor"}]) };
});
 
If you're in an environment that supports ES2015 arrows, you can do this in a pretty concise way: 
this.setState(state => ({ name: state.name.concat([{program: "Text Editor"}]) });
 
Since concat already generates a new array, you don't need to use the immutability helpers, but if you want to, it'd look like this: 
var newState = update(this.state, { // generate a new state object...
  name: { $push: [ "TextEditor" ] } // with the item pushed onto the `name` key
});
 
It's possible to mutate an existing property of this.state and then re-set it with setState, e.g. 
// warning: antipattern!
this.state.name.push("Text Editor");
this.setState({name: this.state.name});
 
but this is not considered a very good practice (you should always avoid directly modifying this.state): 
 
 Notes: 
 NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.