React新手求助：待办列表ID生成代码逻辑解析

我是React新手，跟着入门视频制作待办列表网站，但始终搞不懂添加任务时用到的ID生成代码：

todoList.length === 0 ? 1 : todoList[todoList.length -1].id + 1

这行代码用来给新增任务分配ID，反复看视频还是没弄明白，下面详细拆解它的工作原理：

代码逻辑拆解 #

这是一个三元运算符，语法是条件 ? 满足条件时的结果 : 不满足条件时的结果，对应两种场景：

• 当todoList是空数组（还没有任何任务）时，todoList.length === 0为真，直接给新任务分配ID为1，这是第一个任务的初始ID。
• 当todoList里已经有任务时，todoList.length -1取到数组最后一个元素的索引（数组索引从0开始），然后获取这个最后任务的id值，再加1作为新任务的ID，以此保证每个新任务的ID都是当前最大ID的下一个数，实现ID递增。

举个例子：

• 第一次添加任务：todoList是空数组，ID=1
• 第二次添加任务：todoList最后一个任务ID是1，新ID=1+1=2
• 第三次添加任务：todoList最后一个任务ID是2，新ID=2+1=3，以此类推

完整代码参考 #

App.js

import "./App.css";
import {useState} from "react";
import { Task } from "./Task"

function App() {
const [todoList, setTodoList] = useState([]);
const [newTask, setNewTask] = useState("");

const handleChange = (event) => {
  setNewTask(event.target.value);
};

const addTask = () => {
  const task = {
    id: todoList.length === 0 ? 1 : todoList[todoList.length -1].id + 1,
    taskName: newTask,
    completed: false,
  };
  setTodoList([...todoList, task]);
};

const deleteTask = (id) => {
  setTodoList(todoList.filter((task) => task.id !== id));
};

const completeTask = (id) => {
  setTodoList(
    todoList.map((task)=> {
      if(task.id === id) {
        return { ...task, completed: true  };
      } else {
        return task;
      }
    })
  );
};
  return (
    <div className="App">
        <div className="addTask">
          <input onChange={handleChange} />
            <button onClick={addTask}> Add task</button>
              </div>
        <div className="list">
        {todoList.map((task) => {
          return (
          <Task 
          taskName={task.taskName} 
          id={task.id} 
          completed={task.completed}
          deleteTask={deleteTask}
          completeTask={completeTask}
          />
         
         
          );
        })}
        </div>
          </div> 
      );
    }
export default App;

Task.js

export const Task = (props) => {
    return (
        <div
            className="task"
            style={{ backgroundColor: props.completed ? "pink" : "white"}}
            >
          <h1>{props.taskName}</h1>
          <button onClick={() => props.completeTask(props.id)}> Complete </button>
          <button onClick={() => props.deleteTask(props.id)}> X </button>
          </div>
        );
      }

内容的提问来源于stack exchange，提问作者pia punya Munirah