React任务追踪器新增任务ID为NaN 如何设置默认值解决该问题

问题根因 #

• 当所有任务被删除后，tasks数组为空，tasks[tasks.length - 1]的取值为undefined
• 可选链操作符返回undefined后执行+1运算，最终结果为NaN

解决方案 #

你可以通过添加默认值兜底逻辑解决该问题，以下是两种实现方式：

方式1：空值合并运算符（推荐，符合原有写法逻辑）

const onAdd = (task) => {
  // 最后一个任务id不存在时兜底为0，空数组场景下生成的第一个id为1，符合规则
  const id = (tasks[tasks.length - 1]?.id ?? 0) + 1;
  const newTask = { id, ...task };
  setTasks([...tasks, newTask]);
};

方式2：数组长度判断（兼容性更好）

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

两种方式都可以避免空数组场景下id生成异常的问题，不会影响非空数组时的原有id自增逻辑。

内容的提问来源于stack exchange，提问作者עמית שוקרון