如何在React中根据索引删除state数组中的指定元素

核心实现思路 #

React状态更新必须遵循不可变性原则，不能直接修改原数组，需要生成新数组后覆盖原状态。按索引删除数组元素最简洁的方式是使用filter方法，过滤掉对应索引的元素即可。

完整实现代码 #

你要实现「删除原数组指定索引元素、并将该元素存入另一个数组」的需求，参考代码如下：

import { useState } from 'react';

const initAddValues = [
  {
    "name": "New 1",
    "Value": [98,15,7,8]
  }, 
  {
    "name": "New 2",
    "Value": [7,18,9,40]
  },
  {
    "name": "New 3",
    "Value": [0,19,50,98]
  },
  {
    "name": "New 4",
    "Value": [56,89,34,20]
  },
]

function Demo() {
  // 存储原始列表的状态
  const [addValues, setAddValues] = useState(initAddValues);
  // 存储被删除元素的状态
  const [removedList, setRemovedList] = useState([]);

  // 按索引处理删除+转移逻辑
  const handleRemove = (targetIndex) => {
    // 取出待删除的元素
    const removedItem = addValues[targetIndex];
    // 生成删除指定索引后的新数组（filter不会修改原数组）
    const newAddValues = addValues.filter((_, index) => index !== targetIndex);
    // 更新原始列表状态
    setAddValues(newAddValues);
    // 将被删除元素存入目标数组
    setRemovedList(prev => [...prev, removedItem]);
  };

  return (
    <div>
      {addValues?.map((item, index) => (
        <p key={index}>
          {item.name}
          <button onClick={() => handleRemove(index)}>删除并存入另一数组</button>
        </p>
      ))}

      {/* 展示已删除的元素 */}
      <div>
        <h4>已删除元素：</h4>
        {removedList.map((item, index) => (
          <p key={index}>{item.name}</p>
        ))}
      </div>
    </div>
  )
}

其他常用场景 #

如果你只是要删除已经存入value数组的指定索引元素，写法如下：

const deleteFromValue = (targetIndex) => {
  setValue(prev => prev.filter((_, index) => index !== targetIndex));
};

注意事项 #

• 不要使用splice直接修改原状态数组，splice是可变方法，直接修改原数组不会触发React重渲染，会导致页面不同步。
• 你原代码中出现的setTags、addValue属于变量名笔误，需要对应修改为你实际定义的状态名和数据源名。

内容的提问来源于stack exchange，提问作者Sole