Next.js 13（App目录）Fetch API调用报错求助

报错核心原因 #

报错Error: _hooks_useFetch__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function的直接原因是：useFetch函数未设置默认导出，导致在Data.js中导入时获取到的是undefined，调用undefined自然触发"不是函数"的错误。

此外还有两个潜在问题需要修正：

• Strapi API响应是嵌套结构，直接使用返回值map会报错
• 传递给UI组件的有效数据需要从Strapi返回的attributes字段中提取

修复步骤 #

1. 补全useFetch的默认导出 #

修改src/hooks/useFetch.js，添加默认导出语句：

async function useFetch(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("请求失败");
  }
  return res.json();
}

// 添加默认导出
export default useFetch;

2. 修正Data.js的数据处理逻辑 #

Strapi API的响应结构为{ data: [...], meta: {...} }，数组数据嵌套在data字段内，每个项的实际内容存在attributes中，调整代码如下：

import ItemHomeUI from "./ItemHomeUI";
import useFetch from "../hooks/useFetch";

export default async function Data() {
  const response = await useFetch(
    process.env.NEXT_PUBLIC_API_URL + "?populate=*&filters[type][$eq]=trending"
  );
  // 提取Strapi返回的数组数据
  const data = response.data;
  
  return (
    <section>
      <div>
        {data.map((item) => {
          // 传递attributes给UI组件，包含实际字段内容
          return <ItemHomeUI item={item.attributes} key={item.id} />;
        })}
      </div>
    </section>
  );
}

3. 验证环境变量配置 #

确保.env文件中已正确配置Strapi API地址，格式示例：

NEXT_PUBLIC_API_URL=http://localhost:1337/api/your-collection-name

（替换your-collection-name为你在Strapi中创建的集合名称）

额外验证步骤 #

可以直接在浏览器地址栏中拼接完整API URL，确认是否能返回正常的JSON数据，排除API地址或参数错误的问题。

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