React中删除数组元素后状态不更新问题求助

你这段代码的核心问题是直接修改了原数组的引用，并且传给setTodo的还是同一个数组对象——React依赖状态引用的变化来判断是否需要重新渲染，引用不变的话，组件就不会更新。

React状态更新必须遵循不可变原则：永远不要直接修改原状态，而是创建新的状态值传递给更新函数。下面是几种可行的修复方案：

方案1：使用filter（最推荐） #

filter会返回一个全新的数组，自动排除目标索引的元素，同时用函数式更新确保拿到最新的状态：

const handleDelete = (idx) => {
  setTodo(prevTodo => prevTodo.filter((_, index) => index !== idx));
};

方案2：用slice拼接新数组 #

通过slice截取原数组的前后部分，再拼成新数组：

const handleDelete = (idx) => {
  setTodo(prevTodo => [...prevTodo.slice(0, idx), ...prevTodo.slice(idx + 1)]);
};

方案3：复制数组后再修改（不推荐但可用） #

先复制原数组得到新引用，再修改这个新数组：

const handleDelete = (idx) => {
  const newTodos = [...todo];
  newTodos.splice(idx, 1);
  setTodo(newTodos);
};

完整修复后的代码示例 #

import { useState } from 'react';

function TodoList() {
  const todoList = ["wake up", "brush", "code", "eat"];
  const [todo, setTodo] = useState(todoList);

  const handleDelete = (idx) => {
    setTodo(prevTodo => prevTodo.filter((_, index) => index !== idx));
  };

  return (
    <ul>
      {todo.map((item, index) => (
        <li key={index}>
          {item}
          <span className="materialsymbols-outlined" onClick={() => handleDelete(index)}>delete</span>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;

额外提醒：尽量不要用数组索引作为key（当数组有增删操作时），建议给每个todo项添加唯一标识（比如ID）作为key，避免渲染异常。

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