React中如何访问API返回数组内嵌套的assignee与project字典

你的代码核心错误是错误地尝试从tasks数组中以单个task对象为键取值并遍历，tasks[task]是完全无效的写法——task是数组中的单个元素，而非索引或合法键，这直接导致无法访问到嵌套的assignee属性。实际上每个task本身就包含assignee和project嵌套对象，直接访问即可。

修正后的完整代码 #

<tbody>
  {tasks?.map((task) => (
    <tr
      key={task.id}
      className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
    >
      <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
        {task.id}
      </td>
      <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
        {task.taskName}
      </td>
      <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
        {task.startDate}
      </td>
      <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
        {task.endDate}
      </td>
      {/* 直接访问task下的assignee对象，可选链防止字段缺失报错 */}
      <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
        {task?.assignee?.username || '未分配'}
      </td>
      {/* 示例：访问project的名称 */}
      <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
        {task?.project?.name || '无项目'}
      </td>
      <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
        {task.projectId}
      </td>
    </tr>
  ))}
</tbody>

关键修改说明 #

1. 移除了无效的tasks[task]?.map代码块，直接通过task?.assignee?.username访问嵌套属性
2. 使用?.可选链操作符，避免当assignee或project字段缺失（比如API返回的部分任务未分配执行人）时抛出渲染错误
3. 添加|| '未分配'这类默认值，在无数据时显示友好提示，提升页面体验
4. 补充了访问project名称的示例，供参考扩展使用

额外注意事项 #

• 确保API返回的数据已通过await response.json()正确解析为JavaScript对象
• 异步加载数据时，初始tasks状态设为[]或undefined，配合tasks?.map避免初始渲染报错

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