正在从处于组件状态的数组中删除元素
正在从处于组件状态的数组中删除元素
提问于 2015-04-09 07:58:50
我正在尝试找到从处于组件状态的数组中删除元素的最佳方法。既然我不应该直接修改this.state变量，有没有比这里更好(更简洁)的方法从数组中删除元素？：
onRemovePerson: function(index) {
this.setState(prevState => { // pass callback in setState to avoid race condition
let newData = prevState.data.slice() //copy array from prevState
newData.splice(index, 1) // remove element
return {data: newData} // update state
})
},谢谢。
已更新
已更新为使用setState中的回调。当在更新当前状态时引用当前状态时，应该这样做。
回答 10
Stack Overflow用户
回答已采纳
发布于 2015-08-06 01:10:02
我所见过的最干净的方法是使用filter
removeItem(index) {
this.setState({
data: this.state.data.filter((_, i) => i !== index)
});
}Stack Overflow用户
发布于 2015-04-09 16:25:41
您可以使用update() immutability helper from react-addons-update，它可以在幕后有效地做同样的事情，但是您所做的一切都很好。
this.setState(prevState => ({
data: update(prevState.data, {$splice: [[index, 1]]})
}))Stack Overflow用户
发布于 2017-01-14 06:00:48
我认为在setState()中引用this.state是不鼓励的(State Updates May Be Asynchronous)。
文档建议使用带有回调函数的setState()，以便在更新发生时在运行时传入prevState。所以它看起来是这样的：
在没有ES6的情况下使用Array.prototype.filter
removeItem : function(index) {
this.setState(function(prevState){
return { data : prevState.data.filter(function(val, i) {
return i !== index;
})};
});
}将Array.prototype.filter与ES6箭头函数一起使用
removeItem(index) {
this.setState((prevState) => ({
data: prevState.data.filter((_, i) => i !== index)
}));
}使用不变性辅助的
import update from 'immutability-helper'
...
removeItem(index) {
this.setState((prevState) => ({
data: update(prevState.data, {$splice: [[index, 1]]})
}))
}使用扩展的
function removeItem(index) {
this.setState((prevState) => ({
data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
}))
}请注意，在每个实例中，无论使用哪种技术，都会向this.setState()传递一个回调，而不是对旧this.state的对象引用；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29527385
复制相关文章
相似问题