从Next js Frontend从Strapi API请求的数据未显示数据

Question

你好，我试图克隆TikTok，所以我遇到了一个问题，因为我无法在nextjs前端显示来自strapi后端的数据，并通知您我允许对下面的API代码进行公开请求

import axios from "axios";
const Post = ({ posts, error }) => {
if (error) {
return <div>An error occured: {error.message}</div>;
}
return (
<ul>
{posts.length > 0 &&
posts.map((post) => <li key={post.id}>{post.title}</li>)}
</ul>
);
};
Post.getInitialProps = async (ctx) => {
try {
const res = await axios.get("http://localhost:1337/api/posts");
const posts = res.data;
return { posts };
} catch (error) {
return { error };
}
};
export default Post;

Answer 1

这是故障排除后更正的代码

import axios from "axios";
import React, { useRef, useState } from "react";
const Post = ({ posts, error }) => {
if (error) {
return <div>An error occured: {error.message}</div>;
}
return (
<ul>
{posts.length > 0 &&
posts?.map((post) => <li key={post.id}>{post.attributes.title}</li>)}
</ul>
);
};
Post.getInitialProps = async (ctx) => {
try {
const res = await axios.get("http://localhost:1337/api/posts");
const posts = res.data.data;
return { posts };
} catch (error) {
return { error };
}
};
export default Post;