[英]Cannot read properties of undefined (reading 'map') react JS
I am trying to make a blog using ReactJS and NextJS in VS Code I don't have any error but when I run it it shows in browser: " TypeError: Cannot read properties of undefined (reading 'map') "我正在尝试在 VS Code 中使用 ReactJS 和 NextJS 创建一个博客,但没有任何错误,但是当我运行它时,它会在浏览器中显示:“TypeError: Cannot read properties of undefined (reading 'map')”
So this is the code所以这是代码
import React, { useState, useEffect } from 'react'; import Image from 'next/image'; import moment from 'moment'; import Link from 'next/link'; import { getSimilarPosts, getRecentPosts } from '../services'; const PostWidget = ({ categories, slug }) => { const [relatedPosts, setRelatedPosts] = useState([]); useEffect(() => { if (slug) { getSimilarPosts(categories, slug).then((result) => { setRelatedPosts(result); }); } else { getRecentPosts().then((result) => { setRelatedPosts(result); }); } }, [slug]) console.log(relatedPosts) return ( <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8"> <h3 className="text-xl mb-8 font-semibold border-b pb-4">{slug ? 'Related Posts' : 'Recent Posts'}</h3> {relatedPosts.map((post) => ( <div key={post.title} className="flex items-center w-full mb-4"> <div className="w-16 flex-none"> <img alt={post.title} height="60px" width="60px" unoptimized className="align-middle rounded-full" src={post.featuredImage.url} /> </div> <div className="flex-grow ml-4"> <p className="text-gray-500 font-xs">{moment(post.createdAt).format('MMM DD, YYYY')}</p> <Link href={`/post/${post.slug}`} className="text-md" key={index}>{post.title}</Link> </div> </div> ))} </div> ); }; export default PostWidget;
And this is where the error is.这就是错误所在。
{relatedPosts.map((post) =>
use ?
使用
?
make in this code:在这段代码中制作:
{relatedPosts?.map((post) =>
Check relatedPosts has data before rendering map.在渲染地图之前检查relatedPosts是否有数据。 If not working please share getSimilarPosts, getRecentPosts
如果不起作用,请分享getSimilarPosts、getRecentPosts
{
relatedPosts &&
relatedPosts.length > 0 &&
relatedPosts.map((post) => (
...
))
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.