React：点击元素时如何从数组中移除对应项？

你的代码有两个核心问题导致点击删除无效：

1. 未使用React状态管理数组：直接定义的普通数组arr不是状态变量，修改它不会触发组件重新渲染，所以界面不会更新。
2. slice()方法使用错误：slice(startIndex, endIndex)的第二个参数是结束位置（不是删除数量），而且它不会修改原数组，只会返回一个新的子数组，原数组完全没变化。

正确实现方式 #

使用useState管理数组状态，同时用正确的方式生成删除后的新数组（推荐用filter，更符合React不可变数据的原则）：

import { useState } from 'react';

export default function App() {
  // 用useState初始化数组状态
  const [arr, setArr] = useState(['string1', 'string2', 'string3', 'string4', 'string5', 'string6']);

  const removeMe = (index) => {
    // 用filter生成新数组，排除对应索引的元素
    setArr(arr.filter((_, i) => i !== index));
  };

  return (
    <div className="App">
      {arr.map((string, index) => (
        <button
          key={string} // 用唯一的string作为key，比索引更可靠
          onClick={() => removeMe(index)}
        >
          {string}
        </button>
      ))}
    </div>
  );
}

其他可选实现（用slice拼接） #

如果你想用slice来实现，需要通过拼接前后部分生成新数组：

const removeMe = (index) => {
  // 拼接索引前的部分和索引后的部分，得到新数组
  setArr([...arr.slice(0, index), ...arr.slice(index + 1)]);
};

关键注意点 #

• 永远不要直接修改React状态变量（比如直接用splice修改arr），必须通过setArr传入新数组来更新状态。
• 组件渲染列表时，key最好用列表项的唯一标识（这里的string本身是唯一的），而不是索引，避免列表顺序变化时出现渲染问题。

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