无法读取未定义的属性（读取“地图”）反应 JS

Question

我正在尝试在 VS Code 中使用 ReactJS 和 NextJS 创建一个博客，但没有任何错误，但是当我运行它时，它会在浏览器中显示：“TypeError: Cannot read properties of undefined (reading 'map')”

所以这是代码

 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;

这就是错误所在。

{relatedPosts.map((post) =>

Answer 1

使用? 在这段代码中制作：

{relatedPosts?.map((post) =>

Answer 2

在渲染地图之前检查relatedPosts是否有数据。 如果不起作用，请分享getSimilarPosts、getRecentPosts

{
   relatedPosts && 
   relatedPosts.length > 0 &&
   relatedPosts.map((post) => (
      ...
   ))
}