React列表渲染与独立状态管理：避免全局状态影响局部更新

const [isChecked, setIsChecked] = useState(); // 全局状态
// ...
<div className="todobox" style={{opacity:isChecked ? 0 : ''}}> // 所有项都依赖这个全局状态
    <img onClick={() => handleCheck(obj.id)}/>
</div>

const todoData = [
    {
      id: 0,
      todoname: 'Study',
      todotoday: 'Completing CSS today',
      isChecked: false, // 为每个待办事项添加独立的选中状态
    },
    {
      id: 1,
      todoname: 'Coding',
      todotoday: 'Leetcode 2 Problems',
      isChecked: false, // 每个对象都有自己的 isChecked
    },
];

const [myArray, setMyArray] = useState(todoData);

/**
 * 根据给定的ID，切换myArray中对应待办事项的isChecked状态。
 * @param {Number} id 待办事项的唯一标识ID
 */
const toggleTodoCheck = (id) => {
    // 使用map遍历myArray，查找并更新指定ID的待办事项
    const updatedMyArray = myArray.map((obj) => {
        if (obj.id === id) {
            // 如果ID匹配，则返回一个新的对象，其中isChecked属性被反转
            // 使用展开运算符(...)确保其他属性不变，同时保持对象不可变性
            return { ...obj, isChecked: !obj.isChecked };
        }
        // 如果ID不匹配，则返回原始对象
        return obj;
    });
    // 使用setMyArray更新组件状态，触发UI重新渲染
    setMyArray(updatedMyArray);
};

return (
    <div className="todomain">
        {myArray.map((obj) => {
            return (
                <div
                    className="todobox"
                    key={obj.id}
                    // 现在每个todobox的样式都依赖于其自身的obj.isChecked属性
                    style={{ opacity: obj.isChecked ? 0 : '' }}
                >
                    <div className="checkcont">
                        <img
                            src={check}
                            alt="Check"
                            className="chkbtn btn"
                            // 点击事件调用toggleTodoCheck，并传入当前对象的ID
                            onClick={() => toggleTodoCheck(obj.id)}
                        />
                    </div>
                    <h2 className="head">Todo: {obj.todoname}</h2>
                    <h3 className="todocont">{obj.todotoday}</h3>
                    <div className="todoboxbtn">
                        <TodoIcon />
                    </div>
                </div>
            );
        })}
    </div>
);

import React, { useState } from 'react';
// 假设 check.svg 和 TodoIcon 组件已正确导入
// import check from './check.svg'; 
// import TodoIcon from './TodoIcon'; 

function TodoApp() {
  const todoData = [
    {
      id: 0,
      todoname: 'Study',
      todotoday: 'Completing CSS today',
      isChecked: false, // 新增的布尔属性
    },
    {
      id: 1,
      todoname: 'Coding',
      todotoday: 'Leetcode 2 Problems',
      isChecked: false, // 新增的布尔属性
    },
  ];

  const [myArray, setMyArray] = useState(todoData);

  /**
   * 根据给定的ID，切换myArray中对应待办事项的isChecked状态。
   * @param {Number} id 待办事项的唯一标识ID
   */
  const toggleTodoCheck = (id) => {
    const updatedMyArray = myArray.map((obj) => {
      if (obj.id === id) {
        return { ...obj, isChecked: !obj.isChecked };
      }
      return obj;
    });
    setMyArray(updatedMyArray);
  };

  return (
    <div className="todomain">
      {myArray.map((obj) => {
        return (
          <div
            className="todobox"
            key={obj.id}
            style={{ opacity: obj.isChecked ? 0 : '' }}
          >
            <div className="checkcont">
              <img
                // src={check} // 假设图片资源已导入
                alt="Check"
                className="chkbtn btn"
                onClick={() => toggleTodoCheck(obj.id)}
              />
            </div>
            <h2 className="head">Todo: {obj.todoname}</h2>
            <h3 className="todocont">{obj.todotoday}</h3>
            <div className="todoboxbtn">
              {/* <TodoIcon /> */} {/* 假设TodoIcon组件已导入 */}
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default TodoApp;