React函数组件中如何更新todo对象数组的completed属性？

核心逻辑说明 #

• 不要直接操作导入的静态todo数组，需要将整个todo列表托管到React状态中，所有数据变更通过状态更新完成
• 不要共用单个isChecked状态，每个todo项的选中状态要和自身的completed属性绑定
• 状态更新要遵循不可变原则，不直接修改原状态对象/数组，生成新的数组后传入setter方法

完整实现代码 #

// 首先导入依赖的hook
import { useState } from 'react'
import ToDoData from "./data/tododata";

// React组件名必须大写开头
const MyComp = () => {
  // 将整个todo数组托管为状态
  const [todos, setTodos] = useState(ToDoData);

  // 接收要更新的todo的id作为参数
  const handleChange = (todoId) => {
    setTodos(prevTodos => {
      // 遍历原todo数组，匹配到对应id的项时更新completed属性，其余项保持不变
      return prevTodos.map(todo => {
        if (todo.id === todoId) {
          // 生成新的对象，不修改原对象
          return { ...todo, completed: true }
        }
        return todo
      })
    })
  };

  return (
    // 遍历所有todo项渲染对应的复选框
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            // 绑定当前todo的id到点击事件
            onChange={() => handleChange(todo.id)}
          />
          <span>{todo.task}</span>
        </div>
      ))}
    </div>
  )
}

export default MyComp

额外说明 #

你提供的原始todo数据源末尾缺失数组闭合符]，如果导入时报错可以补全后再使用。

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