Javascript 如何使用 setState 插入数组，响应 js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39941734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I insert into array with setState, react js
提问by alex1997
I'm looking to modify and array in react and insert elements on specific index. This is how my state looks like:
我正在寻找在反应中修改和排列并在特定索引上插入元素。这是我的状态的样子：
this.state = {arr: ['', '', '', '' ]}
What I wanna do is to compile this arr[index] = 'random element'to react js setState syntax. What I tried to do was:
我想做的是编译它arr[index] = 'random element'以响应 js setState 语法。我试图做的是：
this.setState({ arr[index]: 'random element' })
but failed, ty!
但失败了，你！
回答by Pranesh Ravi
Clone the current state using slice(). By doing this, the original state remains unaffected till setState(). After cloning, do your operations over the cloned array and set it in the state. The previous answer will mutatethe state. Read about this here
使用 克隆当前状态slice()。通过这样做，原始状态保持不受影响，直到setState()。克隆后，对克隆的数组进行操作并将其设置为状态。上一个答案将改变状态。在此处阅读有关此内容的信息
let a = this.state.arr.slice(); //creates the clone of the state
a[index] = "random element";
this.setState({arr: a});
回答by Boky
UPDATE
更新
Just use Object.assign()as suggested hereto make a copy of your state.
只需按照此处的建议使用Object.assign()来复制您的状态。
Thus, you can do it as follows :
因此，您可以按如下方式进行：
let new_state = Object.assign({}, this.state);
let a = new_state.arr;
a[index] = "random element";
this.setState({arr: a});
Hope it helps.
希望能帮助到你。
回答by Aldo Makmur
use spread operator https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754
使用扩展运算符https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754
let newChild = "newChild"
this.setState({
children: [
...this.state.children,
newChild
]
})
回答by Aashutosh Prakash
Two Ways to do:
两种做法：
- Using concat:
- 使用连接：
NOTE:It is not allowed to use the array push method, because it mutates the array. It doesn't leave the array intact but changes it. Instead, there should be a new array created which is used to update the state.
注意：不允许使用数组推送方法，因为它会改变数组。它不会使数组保持完整，而是会更改它。相反，应该创建一个用于更新状态的新数组。
Array concat methodcreates a new array, leaving the old array intact, but also returning a new array from it.
Array concat 方法创建一个新数组，保留旧数组不变，但也从中返回一个新数组。
this.state = {
value: '',
list: ['a', 'b', 'c'],
};
this.setState(state => {
const list = state.list.concat(state.value);
return {
list,
value: '',
};
});
- Using ...spread operator:
- 使用 ...传播运算符：
this.state = {
value: '',
list: ['a', 'b', 'c'],
};
this.setState(state => {
const list = [...state.list, state.value]; <--insert in end -->``
const list = [state.value, ...state.list]; <--Or insert in start -->
return {
list,
value: '',
};
});
Reference: https://www.robinwieruch.de/react-state-array-add-update-remove/
参考：https://www.robinwieruch.de/react-state-array-add-update-remove/
