为什么在Next.js中使用'useEffect'和'useState'时数组的状态没有更新?

bprjcwpo  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(194)

我在下一个js中使用'use client'编写了这段代码,无论我尝试什么,任务列表都没有更新,它是一个空数组,也尝试使用useEffect作为依赖项记录它,但什么都没有。

const [taskList, setTaskList] = useState<any[]>([]);

    useEffect(() => {
        setTaskList([
            {
                assigned_to: "id",
                collectionId: "cid",
                collectionName: "tasks",
                completed: false,
                created: "2023-05-28 19:16:09.740Z",
                id: "tid",
                reward: 73,
                story: "<p>hello test 3</p>",
                title: "test3",
                updated: "2023-05-28 19:20:07.549Z"
            },
            {
                assigned_to: "id",
                collectionId: "cid",
                collectionName: "tasks",
                completed: false,
                created: "2023-05-28 19:16:09.740Z",
                id: "tid",
                reward: 33,
                story: "<p>jdhgfjsdf</p>",
                title: "gajhfg",
                updated: "2023-05-29 11:27:50.158Z"
            }
        ])
    }, [])

下面是taskList的使用方式

<div className="grid xl:grid-cols-3 p-20">
                {taskList.map(async (task) => {
                    return (
                        <Task
                            title={task.title}
                            reward={task?.reward}
                            assignedTo={''}
                            id={task?.id}
                        />
                    )
                })}
            </div>

我知道如何对状态更新做出React,我无法在重新渲染后获得更新的值,但这不是问题所在,我甚至无法通过Map来渲染taskList,也无法更新数据。

p1iqtdky

p1iqtdky1#

{taskList.map(async (task) => {
                    return (
                        <Task
                            title={task.title}
                            reward={task?.reward}
                            assignedTo={''}
                            id={task?.id}
                        />
                    )
                })}

更新:从map函数中删除了async,现在可以工作了!

相关问题