使用Strapi与React构建评分应用时的API及渲染错误求助

AI 小北

2026-8-12

解决方案：Strapi v4 与 React 集成的API路径及响应格式问题

问题1：Axios 404错误

你初始用的http://localhost:1337/reviews是Strapi v3的路由格式，当前默认安装的Strapi是v4版本，v4的API路由必须包含/api前缀，所以改为http://localhost:1337/api/reviews是正确的。

问题2：`reviews.map is not a function`错误

Strapi v4的API响应格式和v3存在差异：

v3直接返回数据数组
v4返回的是包含data（实际数据数组）和meta（分页等元信息）的对象，结构示例：

{
  "data": [/* 评论数据数组 */],
  "meta": { /* 元信息 */ }
}

你之前直接把整个响应对象赋值给reviews状态，导致reviews是对象而非数组，因此无法调用map方法。

具体代码修改：

修正API请求路径及POST格式：

// src/api/index.js
import axios from 'axios';
// 改为Strapi v4的正确路径
const url = 'http://localhost:1337/api/reviews';
export const readReviews = () => axios.get(url);
// Strapi v4要求POST请求体包裹在data字段中
export const createReview = (newReview) => axios.post(url, { data: newReview });

在React组件中正确提取响应数据：
假设你在App.js中是这样获取数据的，需要修改为提取res.data.data：

// App.js中获取评论的函数
const fetchReviews = async () => {
  try {
    const res = await readReviews();
    // 提取Strapi v4返回的实际数据数组
    setReviews(res.data.data);
  } catch (err) {
    console.error(err);
  }
};