React列表行删除按钮异常：点击任意按钮仅删除最后元素

你的问题核心在于依赖数组index作为待办项的唯一标识（key和id），同时删除逻辑没有基于最新的数组状态，导致点击删除按钮时总是删错元素。

具体原因：

• 当删除某个元素后，数组的index会重新排序，后续元素的index自动前移，但Row组件保存的还是旧的index作为id，此时用旧index过滤新数组，必然会匹配错误的元素。
• delete_arr函数直接使用当前的arr变量，由于React状态更新是异步的，这个变量可能是旧的状态快照，导致过滤逻辑基于过期数据。

修复步骤 #

1. 给每个待办项分配唯一ID：新增待办时生成独立标识（比如时间戳、自增ID），不再依赖数组index。
2. 用唯一ID作为组件key和删除依据：Row组件的key和id改用待办项自身的唯一ID，确保标识稳定。
3. 使用函数式更新获取最新状态：删除时通过setState的函数式参数拿到最新数组，保证过滤逻辑基于实时数据。

修改后的完整代码 #

const {useState} = React;
function Row({ id, delete1 }) {
  const [check, setCheck] = useState(false);
  function checkmark() {
    console.log("checkmark clicked");
    setCheck(!check);
  }

  let message;
  let even;
  if (check) {
    message = "task completed";
  } else {
    message = "task not completed";
  }
  if (id % 2 === 0) {
    even = "even";
  } else {
    even = "odd";
  }
  return (
    <div>
      <input type='checkbox' onClick={checkmark}></input>
      <input type='text'></input>
      <button onClick={() => delete1(id)}>Delete Task</button>
      {message}
      {even}
    </div>
  );
}

function Display({ inputs, delete1 }) {
  return (
    <div>
      {inputs.map((item) => {
        return <Row key={item.id} id={item.id} delete1={delete1} />;
      })}
    </div>
  );
}
function App() {
  const [arr, setArr] = useState([]);
  function addRow() {
    setArr((prevArr) => [...prevArr, { id: Date.now() }]);
  }
  function delete_arr(id) {
    setArr((prevArr) => prevArr.filter(item => item.id !== id));
  }

  return (
    <React.Fragment>
      <header>TO DO LIST</header>
      <Display inputs={arr} delete1={delete_arr} />
      <button onClick={addRow}>Add New Task</button>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.body).render(<App />);

修复原理 #

• 唯一ID不会随数组元素增删而变化，确保每次删除都能精准定位目标待办项。
• 函数式更新避免了闭包捕获旧状态的问题，保证过滤逻辑始终基于最新的数组数据。

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