英文:
"TypeError posts.map is not a function" while using getServerSideProps in Next.js
问题
我正在学习关于服务器端渲染的Next.js教程。如果我在相同的index.js文件中添加fetch请求，解决方案可以正常工作。
/pages/posts/index.js：
export default function index({ posts }) {
return (
<div>
<h2>Posts API</h2>
<ul>
{posts.map((post) => {
return <li key={post.id}>{post.title}</li>;
})}
</ul>
</div>
);
}
export async function getServerSideProps() {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
const posts = await res.json();
console.log(posts);
return { props: { posts } };
}
然而，当我将代码分解为像这样的组件时，
文件：/pages/posts/index.js
import { userGetPosts } from '../lib/posts';
export async function getServerSideProps() {
const posts = await userGetPosts();
console.log(posts);
return { props: { posts } };
}
export default function Home({ posts }) {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
<h2 className={utilStyles.headingLg}>Blog</h2>
<ul>
{/* 启用这个部分会抛出错误 */}
{/* {posts.map((post) => {
return <li key={post.id}>{post.title}</li>;
})} */}
</ul>
</section>
</Layout>
);
}
../lib/posts.js
export async function userGetPosts() {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
{/* 需要转换为文本，否则index.js获取到的是对象数组 */}
const posts = await res.text();
//console.log(posts);
return { props: { posts } };
};
console.log(posts) 显示响应已接收，但当我尝试执行 posts.map 时，在浏览器上会出现错误 - TypeError posts.map is not a function。
我尝试使用 JSON.parse(posts)，因为从组件中传递的是文本，但没有帮助。
更新：问题已解决。
感谢 @Youssouf Oumar - 你的评论帮助找到了问题。
我一直在按照Next.js官方网站上的官方教程操作 - https://nextjs.org/learn/basics/data-fetching/getstaticprops-details
主要问题是在我的 index.js 中，我调用了 userGetPosts() 函数如下：
export async function getServerSideProps() {
const posts = await userGetPosts();
console.log(posts);
**return { props: { posts } };** //<---- 这是问题所在
}
我将代码更改为：
export async function getServerSideProps() {
const posts = await userGetPosts();
console.log(posts);
**return posts;**
}
英文:
I am following a Next.Js tutorial about server-side rendering. The solution works if I add the fetch in the same index.js file.
/pages/posts/index.js:
export default function index({ posts }) {
return (
<div>
<h2>Posts API</h2>
<ul>
{posts.map((post) => {
return <li key={post.id}>{post.title}</li>;
})}
</ul>
</div>
);
}
export async function getServerSideProps() {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
const posts = await res.json();
console.log(posts);
return { props: { posts } };
}
However, when I break the code in a component like this
file: /pages/posts/index.js
import { userGetPosts } from '../lib/posts';
export async function getServerSideProps(){
const posts = await userGetPosts();
//const data = JSON.parse(JSON.stringify( posts))
console.log(posts);
return { props: { posts } };
}
export default function Home({ posts }) {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
<h2 className={utilStyles.headingLg}>Blog</h2>
<ul>
{/* ENABLING THIS throws error */}
{/* {posts.map((post) => {
return <li key={post.id}>{post.title}</li>;
})} */}
</ul>
</section>
</Layout>
);
}
../lib/posts.js
export async function userGetPosts (){
const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
{/* Need to convert to text else the index.js get array of objects*/}
const posts = await res.text();
//console.log(posts);
return { props: { posts } };
};
The console.log(posts) shows that the response is received but when I try and do posts.map, I get an error on the browser -
TypeError posts.map is not a function
I tried using JSON.parse(posts) because, from the component, I am passing as text, but that does not help.
Any ideas?
UPDATE: ISSUE FIXED.
Thanks @Youssouf Oumar - Your comment helped find the issue.
I was following this official tutorial on Next.js website - https://nextjs.org/learn/basics/data-fetching/getstaticprops-details
The primary issue was that
in my index.js, where I was calling the function userGetPosts() as
export async function getServerSideProps(){
const posts = await userGetPosts();
console.log(posts);
**return { props: { posts } };** ***<---- THIS WAS THE ISSUE***
}
I changed the code to
export async function getServerSideProps(){
const posts = await userGetPosts();
console.log(posts);
**return posts;**
}
答案1
得分: 0
尝试通过编写此代码
代码链接与执行
https://codesandbox.io/p/sandbox/cool-wright-xf4ms6
import { useEffect } from "react";
export default function Index({ posts }) {
useEffect(() => {
console.log(posts);
}, [posts]);
return (
<div>
<h2>Posts API Is There</h2>
<ul>
{posts &&
posts.length > 0 &&
posts.map((post) => {
return <li key={post.id}>{post.title}</li>;
})}
</ul>
</div>
);
}
export async function getServerSideProps() {
console.log("Get Server Side Props Running");
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts = await res.json();
console.log(posts);
return { props: { posts } };
}
首先确保您能够获得响应
然后以JSON格式返回
并检查是否在props中获取到数据
如果没有任何渲染，那么posts中没有数据
如果这对您有用，请点赞并纠正它是否适用于您。
英文:
Try By Writing This Code
Code Link With Excution
https://codesandbox.io/p/sandbox/cool-wright-xf4ms6
import { useEffect } from "react";
export default function Index({ posts }) {
useEffect(() => {
console.log(posts);
}, [posts]);
return (
<div>
<h2>Posts API Is There</h2>
<ul>
{posts &&
posts.length > 0 &&
posts.map((post) => {
return <li key={post.id}>{post.title}</li>;
})}
</ul>
</div>
);
}
export async function getServerSideProps() {
console.log("Get Server Side Props Running");
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts = await res.json();
console.log(posts);
return { props: { posts } };
}
First Make Sure You Are Getting Response
Then Return in JSON Format
And check wheter you are getting data in props
If there is No Any Rendring Then There is No Data inside Post
If this work for then please upvote and correct it worked for you
答案2
得分: 0
更改userGetPosts的返回类型如下，以便getServerSideProps返回{ props: { posts } }，而不是{ props: { posts: { props: { posts } } } }。
export async function userGetPosts() {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
const posts = await res.json(); // 更改此行以正确返回 JSON 数据
return { props: { posts } };
};
英文:
Change the return type of userGetPosts as below, so getServerSideProps returns { props: { posts } } and not { props: { posts: { props: { posts } } } }
export async function userGetPosts (){
const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
const posts = await res.text();
return posts;
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论