如何为useState()初始值的每个Component生成唯一的id

Question

我想在状态开始时创建 30 个空任务卡组件，我的问题是每个任务卡都有相同的 id 我该如何解决这个问题？

import React from 'react'
import { useEffect, useState } from 'react'
import { getTasks } from '../api/task.api'
import { TaskCard } from './TaskCard'


export function TaskLists() {
    const [tasks, setTasks] = useState(Array(30).fill({id: 1, title: 'title', description: 'description'}))

   useEffect(() => {
     async function loadTasks() {
        const res = await getTasks();
        console.log(res.data)
        setTasks(res.data);
     }
     loadTasks();
   },[]);

   const removeTask = (id) => {
        setTasks(tasks.filter(task => task.id !== id));
   }

  return (
    <div>
        {tasks.map((task) => (
            <TaskCard key={task.id} task={task} onDelete={removeTask} />
        ))}
    </div>
  )
}

Answer 1

尝试一下，这个方法可行

const [tasks, setTasks] = useState([...Array(10).keys()].map(x => { return {id: x+1, title: 'title', description: 'description'}}))