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

Question

故事是，我应该能够将 Bob、Sally 和 Jack 放入一个盒子中。我也可以从盒子中取出任何一个。移除后，不会留下任何插槽。

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

我现在需要删除“Bob”。新数组将是：

["Sally", "Jack"]

这是我的反应组件：

...

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() 在调用时不起作用。有任何想法吗？我是looking at this，但我可能做错了，因为我使用的是 React。

Answer 1

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

其他人建议使用Array.prototype.splice()，但该方法会改变数组，因此最好不要将splice() 与React 一起使用。

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

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

Answer 2

要从数组中删除一个元素，只需：

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

Answer 3

这是 Aleksandr Petrov 使用 ES6 的响应的一个细微变化

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}

Answer 4

使用.splice 从数组中删除项目。使用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);

编辑：

正如justin-grant 所指出的，根据经验，永远不要直接对this.state 进行变异，因为之后调用setState() 可能会替换您所做的变异。将 this.state 视为不可变的。

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

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

Answer 5

从反应状态数组中删除项目的简单方法：

当任何数据从数据库中删除并更新列表而不调用 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)
        })
      }
  
}

Answer 6

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>

不建议： 但是，如果您没有任何 id，您也可以使用项目索引作为条件。

index !== itemIndex

Answer 7

使用“拼接”提到的一些答案，正如 Chance Smith 所说的那样，改变了数组。我建议你使用方法调用'slice' (Document for 'slice' is here) 复制原始数组。

Answer 8

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

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

Answer 9

非常简单 首先你定义一个值

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

Answer 10

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 doc 了解更多信息

Answer 11

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

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

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

Answer 12

您忘记使用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
  })
},

Answer 13

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

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

Answer 14

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

Answer 15

const array = [...this.state.people];
array.splice(i, 1);
this.setState({people: array});