React TodoList修改状态数组时出现Cannot read undefined错误

错误原因 #

1. 索引传递错误：ToDoList组件调用handleCheck时传的是{index}（包含index属性的对象），而非数字类型的索引值。在handleCheck中用这个对象作为数组索引时，会被转换为字符串"[object Object]"，导致toDoList[index]返回undefined，自然无法读取completed属性。
2. 状态更新逻辑错误：
   • 创建新数组时多余添加了空对象[...toDoList, {}]，破坏了原数组结构，完全没必要。
   • 切换completed状态的逻辑写反，原本应取反当前状态，结果写成原状态为false时新状态仍为false，逻辑无效。

修复方案 #

修改ToDoList.js #

将传递给handleCheck的参数从{index}改为数字index，同时给列表项添加key属性避免React警告：

import React from "react";

function ToDoList(props) {
  return (
    <>
      {props.list.length === 0 ? <h3>To Do List is Empty</h3> : null}
      {props.list.map((element, index) => {
        return (
          <li 
            className={element.completed ? "list-group-item yes-comp" : "list-group-item no-comp"}
            key={index}
          >
            <span className="badge text-bg-info">{index + 1}</span> &ensp; 
            <input 
              type="checkbox" 
              defaultChecked={element.completed} 
              onChange={() => props.handleCheck(index)} 
            /> &ensp; 
            {element.text}  
            <span className="badge text-bg-light">{element.expiry.toString().slice(4,15)}</span>
          </li>
        );
      })}
    </>
  );
}

export default ToDoList;

修改Todo.js的状态更新逻辑 #

修正handleCheck函数的数组复制和状态切换逻辑，同时优化addNew的状态更新方式：

import React, { useState } from 'react'
import AddNew from './Addnew';
import ToDoList from './ToDoList';

function Todo() {
    const[toDoList, setToDoList] = useState([]);

    function addNew(addText, date){
        const obj = {
            text: addText,
            expiry: date,
            completed: false
        }
        // 用函数式更新确保获取最新状态
        setToDoList(prev => [...prev, obj]);
    }

    function handleCheck(index){
        // 正确复制原数组，不添加多余元素
        const newToDOs = [...toDoList];
        // 直接取反当前项的completed状态
        newToDOs[index].completed = !newToDOs[index].completed;
        setToDoList(newToDOs);
    }

    return ( 
        <>
            <h1>To Do List</h1>
            <AddNew addNew={addNew}/>
            <ul className="list-group">
                <ToDoList list={toDoList} handleCheck={handleCheck} />
            </ul>
        </>
     );
}

export default Todo;

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