如何从状态数组中删除一个项目?

故事是这样的，我应该可以把鲍勃，莎莉和杰克放进一个盒子里。我也可以把它们从盒子里拿出来。拆卸时，没有插槽留下。

people = ["Bob", "Sally", "Jack"]

现在我需要删除，比如说，“Bob”。新的数组将是:

["Sally", "Jack"]

下面是我的react组件:

...


getInitialState: function() {
return{
people: [],
}
},


selectPeople(e){
this.setState({people: this.state.people.concat([e.target.value])})
},


removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
delete array[index];
},


...

这里我向你展示了一个最小的代码，因为有更多的它(onClick等)。关键部分是从数组中删除、删除、销毁“Bob”，但removePeople()在被调用时不起作用。什么好主意吗?我是看看这个，但我可能做错了，因为我使用React。

544635 次浏览
小开
最佳答案

要从数组中删除一个元素，只需执行以下操作:

array.splice(index, 1);

在你的情况下:

removePeople(e) {
var array = [...this.state.people]; // make a separate copy of the array
var index = array.indexOf(e.target.value)
if (index !== -1) {
array.splice(index, 1);
this.setState({people: array});
}
},
小开

当使用React时，你不应该直接改变状态。如果一个对象(或Array，这也是一个对象)被改变了，你应该创建一个新的副本。

其他人建议使用Array.prototype.splice()，但该方法会改变数组，所以最好不要在React中使用splice()。

最简单的使用Array.prototype.filter()来创建一个新数组:

removePeople(e) {
this.setState({people: this.state.people.filter(function(person) {
return person !== e.target.value
})});
}
小开

使用.splice从数组中移除item。使用delete，数组的索引不会被改变，但特定索引的值将是undefined

splice()方法通过删除现有元素和/或添加新元素来更改数组的内容。

语法: array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
people.splice(index, 1);
}
console.log(people);

编辑:

正如<强> < em > justin-grant < / em > < / >强所指出的，作为经验法则，从来没有直接突变this.state，因为之后调用setState()可能会替换你所做的突变。把this.state当作是不可变的。

另一种方法是，在this.state中创建对象的副本并操作副本，使用setState()将它们赋值回去。可以使用Array#map， Array#filter等。

this.setState({people: this.state.people.filter(item => item !== e.target.value);});
小开 
removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
array.splice(index,1);
}

Redfer 医生获取更多信息

小开

你忘记使用setState。例子:

removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
delete array[index];
this.setState({
people: array
})
},
但是最好使用filter，因为它不会改变数组。 例子:< / p > 
removePeople(e){
var array = this.state.people.filter(function(item) {
return item !== e.target.value
});
this.setState({
people: array
})
},
小开

这里是亚历山大彼得罗夫使用ES6的回应的一个小变化

removePeople(e) {
let filteredArray = this.state.people.filter(item => item !== e.target.value)
this.setState({people: filteredArray});
}
小开
一些答案提到使用'splice'，正如Chance Smith所说的那样，它使数组发生了突变。我建议你使用调用slice的方法

. (“slice”的文档在这里)用于复制原始数组
小开

这很简单 首先定义一个值 

state = {
checked_Array: []
}

现在,

fun(index) {
var checked = this.state.checked_Array;
var values = checked.indexOf(index)
checked.splice(values, 1);
this.setState({checked_Array: checked});
console.log(this.state.checked_Array)
}
小开

从react的状态数组中删除项目的简单方法:

当任何数据从数据库中删除和更新列表时，没有调用API，你将删除id传递给这个函数，这个函数从列表中删除已删除的记录

export default class PostList extends Component {
this.state = {
postList: [
{
id: 1,
name: 'All Items',
}, {
id: 2,
name: 'In Stock Items',
}
],
}




remove_post_on_list = (deletePostId) => {
this.setState({
postList: this.state.postList.filter(item => item.post_id != deletePostId)
})
}
  

}

小开 
const [people, setPeople] = useState(data);


const handleRemove = (id) => {
const newPeople = people.filter((person) => { person.id !== id;
setPeople( newPeople );
     

});
};


<button onClick={() => handleRemove(id)}>Remove</button>
小开

这里几乎所有的答案似乎都是类组件，这里有一个代码，在一个功能组件中为我工作。

const [arr,setArr]=useState([]);
const removeElement=(id)=>{
var index = arr.indexOf(id)
if(index!==-1){
setArr(oldArray=>oldArray.splice(index, 1));
}
}
小开

filter方法是在不改变数组状态的情况下修改数组的最佳方法。

它根据条件返回一个新数组。

在你的例子中，过滤器检查条件person.id !== id，并根据条件创建一个排除该项的新数组。

const [people, setPeople] = useState(data);


const handleRemove = (id) => {
const newPeople = people.filter((person) => person.id !== id);


setPeople( newPeople);
};


<button onClick={() => handleRemove(id)}>Remove</button>
< p >不明智的: 但是如果你没有任何id，你也可以为条件使用一个项目索引

index !== itemIndex

小开 
const [randomNumbers, setRandomNumbers] = useState([111,432,321]);
const numberToBeDeleted = 432;


// Filter (preferred)
let newRandomNumbers = randomNumbers.filter(number => number !== numberToBeDeleted)
setRandomNumbers(newRandomNumbers);


//Splice (alternative)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let newRandomNumbers = Array.from(randomNumbers);
newRandomNumbers.splice(indexOfNumberToBeDeleted, 1);
setRandomNumbers(newRandomNumbers);




//Slice (not preferred - code complexity)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let deletedNumber = randomNumbers.slice(indexOfNumberToBeDeleted, indexOfNumberToBeDeleted+1);
let newRandomNumbers = [];
for(let number of randomNumbers) {
if(deletedNumber[0] !== number)
newRandomNumbers.push(number);
};
setRandomNumbers(newRandomNumbers);
小开

简单的解决方案使用slice 不改变状态

const [items, setItems] = useState(data);
const removeItem = (index) => {
setItems([
...items.slice(0, index),
...items.slice(index + 1)
]);
}
小开

这是你当前的状态变量

const [animals, setAnimals] = useState(["dogs", "cats", ...])

调用此函数并传递要删除的项。

removeItem("dogs")


const removeItem = (item) => {
setAnimals((prevState) =>
prevState.filter((prevItem) => prevItem !== item)
);
};

你的状态函数现在变成:

["cats", ...]

另一种方法是使用useState钩子。它声明:与类组件中的setState方法不同，useState不会自动合并更新对象。你可以通过将函数更新器形式与对象扩展语法组合来复制这种行为，如下所示，或者使用useReducer钩子。

const [state, setState] = useState({});
setState(prevState => {
return {...prevState, ...updatedValues};
});
小开

只需过滤掉已删除的项，并再次用剩余的项更新状态，

let remainingItems = allItems.filter((item) => {return item.id !== item_id});
    

setItems(remainingItems);
小开

如果你使用:

const[myArr, setMyArr] = useState([]);

添加:

setMyArr([...myArr, value]);

至于移除:

let index = myArr.indexOf(value);
if(index !== -1)
setPatch([...myArr.slice(0, index), ...myArr.slice(index, myArr.length-1)]);

提交答案