如何为useState初始值中的每个TaskCard生成唯一ID？

你的问题出在使用Array(30).fill({id: 1, ...})时，fill方法会将同一个对象引用填充到数组的每一个位置，导致所有TaskCard的id完全相同，这不仅违反了React列表元素key必须唯一的要求，还可能引发渲染逻辑异常。

解决这个问题的核心是为初始化的30个任务生成独立的对象和唯一的id，可以用以下两种方式修改初始化逻辑：

方法1：使用Array.from生成独立对象 #

Array.from支持传入映射函数，能为每个数组项创建新的对象，同时利用索引生成唯一id：

const [tasks, setTasks] = useState(
  Array.from({ length: 30 }, (_, index) => ({
    id: index + 1, // id从1到30递增，保证唯一
    title: 'title',
    description: 'description'
  }))
);

方法2：使用Array.map配合展开运算符（处理稀疏数组） #

先将空数组转为可遍历的数组，再通过map生成每个独立对象：

const [tasks, setTasks] = useState(
  Array(30).fill(null).map((_, index) => ({
    id: index + 1,
    title: 'title',
    description: 'description'
  }))
);

补充说明 #

• 两种方法都能确保每个任务对象是独立的，id唯一，满足React列表key的要求。
• 后续useEffect中从API获取的数据会覆盖初始化的数组，所以临时的id不会影响正式数据的使用。

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