React useState实现简易TodoList时所有复选框联动异常求助

• 复选框的onChange回调没有区分当前操作的具体Todo项，触发修改时会统一更新所有数组元素的勾选状态，导致所有列表项同步变化
• 使用了非受控属性defaultChecked绑定勾选状态，后续状态变更无法自动同步到视图

import React, { useState } from "react";

const ToDoList = () => {
  const [checkboxValue, setCheckboxValue] = useState([
    {
      id: 1,
      value: "Paint the walls and other",
      isChecked: false,
    },
    {
      id: 2,
      value: "Replace toilet stuffs",
      isChecked: false,
    },
    {
      id: 3,
      value: "Replace kitchen slabs and sink",
      isChecked: false,
    },
    {
      id: 4,
      value: "Floor mobbing",
      isChecked: false,
    },
    {
      id: 5,
      value: "Light ang plug points making",
      isChecked: false,
    },
    {
      id: 6,
      value: "Place measurement for furniture",
      isChecked: false,
    },
  ]);

  const checkHandler = (event) => {
    const currentId = Number(event.target.dataset.id);
    const newCheckValues = checkboxValue.map(el => {
      // 仅修改当前操作的项，其余项保持原状态
      if (el.id === currentId) {
        return {
          ...el,
          isChecked: event.target.checked,
        };
      }
      return el;
    });
    setCheckboxValue(newCheckValues);
  };

  return (
    <>
      <h3 className="commonHeading">To Do List </h3>
      <div className="todoCont">
        <ul>
          {checkboxValue.map((todo) => (
            <li key={todo.id}>
              {/* 类名动态生成，无需单独存储在state里 */}
              <label className={`check_style ${todo.isChecked ? 'lined' : ''}`}>
                <input
                  checked={todo.isChecked}
                  onChange={checkHandler}
                  type="checkbox"
                  data-id={todo.id}
                />
                <span></span> {todo.value}
              </label>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
};

export default ToDoList;

• 给每个复选框新增data-id属性绑定对应Todo的id，用于操作时识别当前项
• 调整checkHandler逻辑：遍历数组时仅修改id匹配的项的状态，其余项保持不变
• 将defaultChecked替换为受控属性checked，和state的isChecked绑定保证状态同步
• 优化了类名生成逻辑，直接通过isChecked状态动态拼接，无需单独存储checkClass字段，减少冗余状态

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