React待办应用自增ID声明位置及TypeScript类型问题咨询

一、为什么nextId不能在组件函数内部声明？ #

• React函数组件每次渲染（比如状态更新、父组件触发重渲染时）都会重新执行整个函数体。如果把let nextId = 1放在ToDoList函数内部，每次渲染都会把nextId重置为1，新增任务时id永远是1，不仅会导致React的key重复报错，还会让删除筛选逻辑失效——多个任务id相同，删除时会误删所有同id的任务。
• 放在函数外部的话，这个变量属于模块级作用域，只会在模块首次加载时初始化一次，后续组件渲染不会重置它，才能保证id持续自增。

二、生产环境的影响 #

• 如果你的应用中只会渲染一个ToDoList组件实例，外部的nextId不会有问题，生产环境可以正常运行。
• 但如果应用中需要同时渲染多个ToDoList实例（比如多个独立的待办列表），它们会共享同一个模块级的nextId，导致不同列表的任务id连续递增，甚至出现id冲突（比如A列表新增任务id是1，B列表新增时id就变成2），跨列表的筛选删除逻辑会出错。这种场景下建议改用组件内部状态管理id（比如用useState存当前最大id，新增时取maxId+1），或者用uuid生成唯一id。

三、解决TypeScript的隐式any错误 #

你需要先给待办任务定义明确的类型，再给相关变量和函数参数标注类型，让TypeScript正确推断，具体修改如下：

import { useState } from "react";

// 定义待办任务的类型
interface Task {
  id: number;
  taskName: string;
}

// 模块级自增ID
let nextId = 1;

const ToDoList = () => {
  // 初始化列表，指定类型为Task数组
  const initialList: Task[] = [{ id: 0, taskName: "示例任务" }];

  // 给useState指定泛型，明确list的类型
  const [list, setList] = useState<Task[]>(initialList);
  const [inputValue, setInputValue] = useState<string>("");

  const handleAddClick = () => {
    if (inputValue.length > 0) {
      setList([...list, { id: nextId++, taskName: inputValue }]);
    }
    setInputValue("");
  };

  // 明确id参数的类型为number
  const handleDeleteClick = (id: number) => {
    console.log(id);
    setList(list.filter((item) => item.id !== id));
  };

  return (
    <>
      <ul id="list">
        {list.map((item) => (
          <li key={item.id}>
            <input type="checkbox" />
            {item.taskName}
            <span onClick={() => handleDeleteClick(item.id)}>&#10060;</span>
          </li>
        ))}
      </ul>
      <section>
        <input
          onKeyUp={(e) => {
            if (e.key === "Enter") {
              handleAddClick();
            }
          }}
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          id="addGoal"
          placeholder="在这里添加任务！"
        />
        <button onClick={handleAddClick}>添加任务！</button>
        <textarea placeholder="这里可以用来记录你的想法！"></textarea>
      </section>
    </>
  );
};

export default ToDoList;

修改说明： #

1. 新增Task接口，明确任务对象的结构类型；
2. 给initialList和useState的list指定Task[]类型，让TypeScript识别列表元素的结构；
3. 给handleDeleteClick的id参数明确标注number类型，此时lint错误会消失；
4. 把代码里的英文注释改成中文，提升可读性。

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