如何从状态数组中删除项目？

Question

如何从状态数组中删除项目？

275

这个故事是，我应该能够把Bob、Sally和Jack放进一个盒子里。我也可以从盒子中移除其中任何一个。当被移除时，不会留下空位。

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，所以可能做错了什么。

- Sylar

问题在于您正在改变您的集合。该集合仍然指向相同的数组引用，因此它不会被视为已更改（变量仍然指向相同的数组），因此它不会重新渲染。一种常见的实现方法是复制原始状态，对其进行修改，然后使用副本覆盖当前状态，这将是一个新的数组引用，并被视为已更改，从而导致渲染更新。 - CTS_AE

18个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Glover · Answer 1

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

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

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

- Mostafa Mohammadzadeh · Answer 2

如果你使用：

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)]);

- QC innodel · Answer 3

这很简单，首先你需要定义一个值

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)
}

- Gibbs · Answer 4

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

请查看doc以获取更多信息

- Kenneth Ngige Mwaura · Answer 5

删除具有特定值的元素 // 请注意，过滤函数始终返回一个新数组。

const people = ["Bob", "Sally", "Jack"]
    
const removeEntry = (remove) => {
const upDatePeople = people.filter((Person) =>{
return Person !== remove
});
console.log(upDatePeople)
//Output: [ 'Sally', 'Jack' ]
}
removeEntry("Bob");

- Shardul Birje · Answer 6

几乎所有的答案都是针对类组件的，这里是一个在函数式组件中适用的代码，它对我很有效。

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

- Aleksandr Petrov · Answer 7

你忘记使用 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，因为它不会改变数组。例如：

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},

- Ritwik Math · Answer 8

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);