React TodoList复选框识别及状态不即时渲染问题求助

你的核心问题有两个：一是状态更新不触发渲染，二是勾选后组件未消失。以下是修复步骤：

1. 修复状态不即时渲染的问题 #

你直接修改了checkedItems原数组的元素，然后把同一个数组引用传给setCheckedItems。React通过浅比较判断状态变化，原数组引用没变，所以不会触发重渲染。必须创建新数组来更新状态：

修改checkHandler函数：

const checkHandler = ({ target }, idx) => {
  // 复制原数组生成新数组，避免修改原状态
  const newCheckedItems = [...checkedItems];
  newCheckedItems[idx] = !newCheckedItems[idx];
  setCheckedItems(newCheckedItems);
};

2. 实现勾选后组件消失 #

在渲染列表时，只渲染未被勾选的项，通过判断checkedItems[idx]的值来控制；同时建议用todo的id作为key（不要用索引，避免列表变动时渲染异常）：

return (
  <div className="App">
    {items.map((todo, idx) => (
      // 只渲染未勾选的项
      !checkedItems[idx] && (
        <div key={todo.id}>
          <span>{todo.value}</span>
          <input
            type="checkbox"
            checked={checkedItems[idx]}
            onChange={(e) => checkHandler(e, idx)}
          />
        </div>
      )
    ))}
  </div>
);

完整修复后的代码 #

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 = ({ target }, idx) => {
    const newCheckedItems = [...checkedItems];
    newCheckedItems[idx] = !newCheckedItems[idx];
    setCheckedItems(newCheckedItems);
  };

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

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