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

使用 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 
    })});
}

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

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

以下是亚历山大·彼得罗夫使用 ES6 的响应的微小变化

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

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

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

使用 .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);

编辑：

正如贾斯汀-格兰特所指出的，根据经验，永远不要直接this.state突变，因为之后调用setState()可能会取代你所做的突变。this.state视为不可变的。

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

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

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

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

当任何数据从数据库中删除并更新列表而没有 API 调用时，您将已删除的 ID 传递给此函数，此函数从列表中删除已删除的 recored

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 [animals, setAnimals] = useState(["dogs", "cats", ...])

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

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

您的状态变量现在变为：

["cats", ...]

另一种方法是使用useState钩子。检查文档： https://reactjs.org/docs/hooks-reference.html#functional-updates 它指出：与类组件中的 setState 方法不同，useState 不会自动合并更新对象。您可以通过将函数更新程序窗体与对象传播语法相结合来复制此行为，如下所示或使用useReducer钩子。

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

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

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

一些答案提到使用"splice"，正如Chance Smith所说的那样，它改变了数组。我建议您使用方法调用"切片"("切片"的文档在这里(，它制作原始数组的副本。

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

首先定义一个值

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

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 文档

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

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

删除具有特定值的元素//注意过滤器函数总是返回一个新数组。

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

你忘了用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
  })
},

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