React报错Cannot read properties of undefined (reading 'id') 求助

问题定位 #

错误Cannot read properties of undefined (reading 'id')的根源在于更新tasks状态的方式错误：
在handleAdd函数中，你使用了setTasks(...tasks, task)，这会把数组的元素逐个传递给setState，导致tasks的状态从数组变成了单个任务对象。

当第一次点击添加按钮时：

• tasks是空数组，...tasks展开后无内容，setTasks实际接收的参数是task，此时tasks状态变为单个对象而非数组。
  当第二次点击添加按钮时：
• tasks是单个对象，tasks.length为undefined，tasks[tasks.length-1]等价于tasks[-1]，结果是undefined，访问undefined.id就会触发报错。

修复代码 #

修改handleAdd函数中的setTasks调用，用数组展开语法创建新数组：

const handleAdd = () => {
  const task = {
    id: tasks.length === 0 ? 1 : tasks[tasks.length-1].id +1,
    name: newTask
  }

  // 正确的状态更新方式：创建新数组传入setTasks
  setTasks([...tasks, task])
}

额外优化建议 #

如果后续有删除任务的操作，用tasks.length生成id可能会出现重复（比如删除最后一个任务后再添加），可以改用时间戳生成唯一id：

const task = {
  id: Date.now(),
  name: newTask
}

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