我试图将数组添加到包含数组的状态。 我希望将数据添加到数组的末尾。 我的数据如下所示:
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.
更多推荐
发布评论