使用通用事件处理器时，如何为React用户状态添加唯一ID作为map的key？

核心思路很简单：别在输入过程中生成ID，等用户提交表单、确认要添加这个用户的时候再生成，这样每个新用户只会生成一次唯一ID，完全不会出现重复生成的问题。

方案1：用原生时间戳（简单场景够用） #

直接修改AddUser组件里的submitEventHandler，在验证通过后，给要添加的用户对象追加唯一ID：

const submitEventHandler = (event) => {
  event.preventDefault();
  console.log(user);
  
  // 验证逻辑，这里加return避免后续无效执行
  if (user.name.trim().length === 0 || user.age.trim().length === 0) {
    setIsValid(false);
    return;
  }
  if (+user.age < 1) {
    setIsValid(false);
    return;
  }

  setIsValid(true);
  // 在这里生成唯一ID，用时间戳转字符串就行
  const newUser = {
    ...user,
    id: Date.now().toString()
  };

  setUserList((prev) => [...prev, newUser]);
  setUser(initialState);
  console.log(newUser);
};

方案2：用uuid库（严谨场景首选） #

如果需要更可靠的唯一ID（比如多人协作、高频提交的场景），可以用uuid库：

1. 先安装：npm install uuid
2. 在AddUser组件里导入并使用：

import { v4 as uuidv4 } from 'uuid';

// ...

const submitEventHandler = (event) => {
  // 前面的验证逻辑不变
  
  setIsValid(true);
  const newUser = {
    ...user,
    id: uuidv4() // 生成标准UUID
  };

  setUserList((prev) => [...prev, newUser]);
  setUser(initialState);
};

这样改完之后，UserList组件里用user.id作为key就完全没问题了，而且ID只会在提交时生成一次，不会因为输入框的每一次变化重复生成。

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