Tengo una aplicación Next.js con la siguiente página:
import { useState, useEffect } from 'react'; import axios from 'axios'; import { withRouter } from 'next/router'; import NotFound from '@/pages'; import { Page, PostBlock } from '@/components'; const Main = ({ router }) => { const [postsData, setPostsData] = useState({ posts: [], page: 0, pages: 0 }); function fetchData() { axios .get('/api/articles', { params: { page: router.query?.page, lang: router.locale, tag: router.query.tag, }, }) .then(response => { setPostsData(response.data); }) .catch(error => console.log(error)); } useEffect(() => { fetchData(); }, []); // if (!postsData.posts.length) return <NotFound />; return ( <Page title='Home' className='home-template'> <div id='grid' className='post-grid'> {postsData.posts?.map(post => { return ( <PostBlock featured={post.featured} key={post.key} /> ); })} </div> </Page> ); }; export default withRouter(Main);La API obtiene algunos artículos sobre el montaje de componentes y los muestra en la interfaz de usuario. Hasta aquí todo bien.
También quiero mostrar un componente en caso de que no haya artículos para mostrar o si falla la API, pero si descomento la línea
if (!postsData.posts.length) return <NotFound />;
la aplicación termina en un bucle infinito.
¿Cómo puedo arreglar esto?
Intente configurar las publicaciones como una matriz vacía en caso de que los datos estén vacíos
if (!(postsData.posts||[]).length) return <NotFound />;Solo necesita renderizar condicionalmente su parte de bucle como se muestra a continuación:
return ( <Page title='Home' className='home-template'> <div id='grid' className='post-grid'> { (postsData?.posts||[]).length ? <> {postsData.posts.map(post => { return ( <PostBlock featured={post.featured} key={post.key} /> ); }) } </> : <NotFound /> } </div> </Page> );