React复选框待办列表渲染问题求助：选中项残留及无法删除

问题描述 #

• 已勾选的复选框在重新渲染后仍会残留
• 当列表仅剩两个复选框时，勾选后无法使其消失

怀疑是setState逻辑问题：执行setItems([...items.filter((item) => !checkedItems[item.id])]);重新渲染时，当前作用域内的checkedItems ={false,true,false,false,false}，导致复选框残留。

问题根源 #

1. 直接修改State数组：checkedItems[idx] = !checkedItems[idx]直接修改React状态对象，违反了状态不可变原则，会导致状态更新不及时、渲染异常。
2. key值使用错误：用map循环的索引idx作为元素key，当items数组被过滤后，剩余项的索引会变化，和checkedItems数组的索引无法正确对应，导致勾选状态混乱。
3. 异步状态更新逻辑错误：setItems依赖的checkedItems是当前作用域的旧值，由于setCheckedItems是异步执行的，此时新的勾选状态还未生效，过滤逻辑会出错。

修复方案 #

1. 遵循状态不可变原则：更新checkedItems时创建新数组，不直接修改原state。
2. 使用唯一id作为key：用todo的id代替索引作为元素key，确保元素标识稳定。
3. 基于最新状态更新：使用setState的函数式更新，确保拿到最新状态值进行计算；或者直接基于原todos数组和勾选状态渲染剩余项，避免维护重复状态。

修复后的代码 #

方案一：优化双状态同步逻辑 #

import "./styles.css";
import React from "react";

const todos = [
  { id: 0, value: "Wash the dishes" },
  { id: 1, value: "have lunch" },
  { id: 2, value: "listen to music" },
  { id: 3, value: "running" },
  { id: 4, value: "work out" }
];

export default function App() {
  const [items, setItems] = React.useState(todos);
  const [checkedItems, setCheckedItems] = React.useState(
    new Array(todos.length).fill(false)
  );

  const checkHandler = (todoId) => {
    // 函数式更新确保拿到最新勾选状态
    setCheckedItems(prev => {
      const newChecked = [...prev];
      newChecked[todoId] = !newChecked[todoId];
      return newChecked;
    });
    
    // 基于最新状态过滤待办项
    setItems(prevItems => prevItems.filter(item => !checkedItems[item.id]));
  };

  return (
    <div className="App">
      {items.map((todo) => (
        <div key={todo.id}>
          <span>{todo.value}</span>
          <input
            type="checkbox"
            checked={checkedItems[todo.id]}
            onChange={() => checkHandler(todo.id)}
          />
        </div>
      ))}
    </div>
  );
}

方案二：简化状态管理（推荐） #

直接基于原todos数组和勾选状态渲染剩余项，无需维护额外的items状态：

import "./styles.css";
import React from "react";

const todos = [
  { id: 0, value: "Wash the dishes" },
  { id: 1, value: "have lunch" },
  { id: 2, value: "listen to music" },
  { id: 3, value: "running" },
  { id: 4, value: "work out" }
];

export default function App() {
  const [checkedItems, setCheckedItems] = React.useState(
    new Array(todos.length).fill(false)
  );

  const checkHandler = (todoId) => {
    setCheckedItems(prev => {
      const newChecked = [...prev];
      newChecked[todoId] = !newChecked[todoId];
      return newChecked;
    });
  };

  // 直接过滤出未勾选的待办项
  const remainingTodos = todos.filter((todo) => !checkedItems[todo.id]);

  return (
    <div className="App">
      {remainingTodos.map((todo) => (
        <div key={todo.id}>
          <span>{todo.value}</span>
          <input
            type="checkbox"
            checked={checkedItems[todo.id]}
            onChange={() => checkHandler(todo.id)}
          />
        </div>
      ))}
    </div>
  );
}

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