Next.js应用中Axios调用Strapi API无法提取数据的问题求助

你的GetProjects组件存在几个关键问题，导致数据无法正确渲染：

1. 组件未返回任何JSX内容，仅调用了异步函数但未处理其结果
2. 异步函数内的渲染逻辑错误（递归调用renderData会引发无限循环，且map未返回元素）
3. 未使用React状态管理异步数据，无法触发组件重新渲染

下面提供两种可行的解决方案，适配Next.js不同组件类型：

方案1：客户端组件（使用React Hooks） #

适合需要交互逻辑的场景，通过useState存储数据、useEffect触发异步请求：

// GetProjects.jsx
import React, { useState, useEffect } from "react";
import axios from "axios";

function GetProjects() {
  // 定义状态存储项目数据、加载状态、错误信息
  const [projects, setProjects] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProjects = async () => {
      try {
        const response = await axios.get('http://localhost:1337/api/projects?populate=*');
        // 提取Strapi返回的项目数据数组
        setProjects(response.data.data);
      } catch (err) {
        setError(err.message);
        console.error(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchProjects();
  }, []); // 空依赖数组确保请求仅在组件挂载时执行一次

  // 处理加载与错误状态
  if (isLoading) return <div className="text-light">加载项目中...</div>;
  if (error) return <div className="text-light">加载失败：{error}</div>;

  // 渲染项目列表
  return (
    <div>
      <ul className="list-unstyled">
        {projects.map(project => (
          <li key={project.id} className="mb-2 text-light">
            {project.attributes.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default GetProjects;

方案2：Server Component（Next.js 13+ App Router） #

适合静态数据场景（如作品集），Server Component支持直接使用async/await获取数据，无需hooks：

// GetProjects.jsx
import axios from "axios";

async function GetProjects() {
  try {
    const response = await axios.get('http://localhost:1337/api/projects?populate=*');
    const projects = response.data.data;

    return (
      <div>
        <ul className="list-unstyled">
          {projects.map(project => (
            <li key={project.id} className="mb-2 text-light">
              {project.attributes.title}
            </li>
          ))}
        </ul>
      </div>
    );
  } catch (error) {
    console.error(error);
    return <div className="text-light">加载项目失败</div>;
  }
}

export default GetProjects;

关键注意事项 #

• 确认Strapi API端点返回数据结构正确：访问http://localhost:1337/api/projects?populate=*，检查response.data.data是否为包含项目对象的数组
• 渲染列表时必须添加唯一key属性（使用project.id即可），符合React渲染规范
• 如果使用Server Component，确保组件未使用客户端专属API（如window、document）

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