React中列表项独立状态管理：解决点击事件影响所有元素的问题

const todoData = [
    {id:0,todoname:"Study",todotoday:"Completing CSS today"},
    {id:1,todoname:"Coding",todotoday:"Leetcode 2 Problems"}
];

const [myArray,setmyArray] = useState(todoData);
const [isChecked, setIsChecked] = useState(); // 单一状态变量

const handleCheck = (id) =>{
    console.log(id);
    setIsChecked(current => !current); // 更新这个单一状态
}

return (
    <div className="todomain">
        {
            myArray.map((obj)=>{
                return (
                    <div className="todobox" key={obj.id} style={{opacity:isChecked ? 0 : ''}}> {/* 所有元素都依赖于同一个 isChecked */}
                        <div className="checkcont">
                            <img src={check} alt="Check" className='chkbtn btn' onClick={() => handleCheck(obj.id)}/>
                        </div>
                        <h2 className="head" >Todo: {obj.todoname}</h2>
                        <h3 className="todocont">{obj.todotoday}</h3>
                        <div className="todoboxbtn">
                            <TodoIcon />
                        </div>
                    </div>
                )
            })
        }
    </div>
);

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

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

/**
 * 根据给定的ID，切换MyArray中对应待办事项的isChecked状态。
 * 该函数通过映射数组并创建新对象来确保状态的不可变更新。
 * @param {Number} id 待办事项的唯一标识符
 */
const toggleTodoCheck = (id) => {
    const updatedMyArray = myArray.map((obj) => {
        // 如果找到匹配的ID，则创建一个新对象，并切换其 isChecked 属性
        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 : '' }} // 绑定到每个 obj 的 isChecked
                >
                    <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 />
                    </div>
                </div>
            );
        })}
    </div>
);

import React, { useState } from 'react';
import check from './check.svg'; // 假设你有一个check图标
import TodoIcon from './TodoIcon'; // 假设你有一个TodoIcon组件

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

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

  /**
   * 根据给定ID，切换myArray中对应待办事项的isChecked状态。
   * 该函数通过映射数组并创建新对象来确保状态的不可变更新。
   * @param {Number} 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.5 : 1 }} // 绑定到每个 obj 的 isChecked，这里我改成了0.5和1，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 />
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default TodoApp;