Estoy tratando de hacer un blog usando ReactJS y NextJS en VS Code. No tengo ningún error, pero cuando lo ejecuto, aparece en el navegador: "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'mapa')"
Así que este es el código
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;Y aquí es donde está el error.
{relatedPosts.map((post) =>usar ? hacer en este código:
{relatedPosts?.map((post) =>Verifique que las publicaciones relacionadas tengan datos antes de representar el mapa. Si no funciona, comparta getSimilarPosts, getRecentPosts
{ relatedPosts && relatedPosts.length > 0 && relatedPosts.map((post) => ( ... )) }