NextJS问题：无法将API返回的JSON列表传入导航组件

以下是几种常见的问题原因和对应解决方法：

1. API请求逻辑未正确处理异步流程 #

如果你的getAllPages函数没有正确等待请求完成，就会导致尝试读取未定义的data.items。比如直接使用fetch但未加await，或者没解析响应的JSON数据。

错误示例：

async function getAllPages() {
  const res = fetch('你的Django API地址');
  // res此时是Promise对象，res.data不存在
  return res.data.items;
}

修正后：

async function getAllPages() {
  const res = await fetch('你的Django API地址');
  // 先检查请求是否成功
  if (!res.ok) throw new Error(`请求失败: ${res.status}`);
  const data = await res.json();
  return data.items;
}

2. API实际响应结构不符合预期 #

虽然你确认API能返回正确JSON，但实际请求时可能因跨域、认证失败等问题返回了错误内容（比如HTML错误页），导致data不是预期的包含items的对象。

解决方法：在函数中打印返回数据，确认实际结构：

async function getAllPages() {
  const res = await fetch('你的Django API地址');
  const data = await res.json();
  console.log('API实际返回:', data); // 在控制台查看真实响应
  // 用可选链+默认值兜底，避免报错
  return data?.items || [];
}

3. 组件中未正确处理异步数据的状态 #

如果在组件中直接调用getAllPages()而不等待异步完成，会拿到Promise对象而非实际数据，进而引发遍历错误。

错误示例：

const Navigation = () => {
  const pages = getAllPages(); // pages是Promise，不是数组
  return <nav>{pages.map(page => <a href={page.url}>{page.title}</a>)}</nav>;
}

修正后（用React状态管理异步数据）：

import { useState, useEffect } from 'react';

const Navigation = () => {
  const [pages, setPages] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPages = async () => {
      try {
        const pageData = await getAllPages();
        setPages(pageData);
      } catch (err) {
        console.error('获取导航数据失败:', err);
      } finally {
        setLoading(false);
      }
    };
    fetchPages();
  }, []);

  if (loading) return <div>加载中...</div>;

  return (
    <nav>
      {pages.map(page => (
        <a key={page.id} href={page.url}>{page.title}</a>
      ))}
    </nav>
  );
};

4. 用可选链操作符做兜底处理 #

为了避免因数据异常导致组件崩溃，建议在访问items时使用可选链操作符?.，同时给默认空数组：

return data?.items || [];

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