Next.js中使用useEffect与useState时数组状态不更新的问题

核心问题：map 中使用 async 导致渲染失效 #

你在 taskList.map 里用了 async 函数，这会让 map 返回Promise 对象数组，而非 React 可识别的 JSX 元素。React 无法直接渲染 Promise，所以你看不到任何 Task 组件，甚至会因为这个异常误以为 taskList 状态未更新。

修复步骤 #

1. 移除 map 中的 async 关键字
   如果 Task 组件无需异步逻辑，直接去掉 async 即可：

   <div className="grid xl:grid-cols-3 p-20">
       {taskList.map((task) => {
           return (
               <Task
                   key={task.id} {/* 必须添加唯一key，避免React警告 */}
                   title={task.title}
                   reward={task?.reward}
                   assignedTo={''}
                   id={task?.id}
               />
           )
       })}
   </div>
   

2. 验证状态更新情况
   可以在组件内直接打印状态，或通过 useEffect 监听确认：

   useEffect(() => {
       console.log('taskList 已更新:', taskList);
   }, [taskList]);
   

3. 确认 use client 位置
   确保 'use client' 声明在文件最顶部，所有导入语句之前：

   'use client';
   import { useState, useEffect } from 'react';
   import Task from './Task'; // 你的Task组件路径
   

额外注意事项 #

• 列表渲染必须给元素加唯一 key 属性（用 task.id 即可），避免性能问题和 React 警告。
• 若 Task 组件内部有异步操作，应在组件内部通过 useEffect 处理，不要把异步逻辑放在 map 的回调函数中。

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