Nextjs: avoid infinite loop when adding a conditional render

Question

I have a Next.js application with the following page:

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);

The api fetches some articles on component mount, and display them in the UI. So far so good.

I also want to display a component in case there are no articles to display or if the api fails, but if I uncomment the line

if (!postsData.posts.length) return <NotFound />;

the application ends up in an infinite loop.

How can I fix this?

setPostsData(response.data); this is creating new object with response coming from api. In case if there are no posts, is the api response coming as empty array. If the posts value is not matching with array format then it is possible to throw a length — Prathap Parameswar
– Prathap Parameswar, Commented Jan 18, 2022 at 10:58

Prathap Parameswar · Accepted Answer · 2022-01-18 10:59:20Z

1

Try setting posts as empty array in case if the data is empty

if (!(postsData.posts||[]).length) return <NotFound />;

answered Jan 18, 2022 at 10:59

Prathap Parameswar

4991 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Surjeet Bhadauriya · Accepted Answer · 2022-01-18 10:46:34Z

0

You just need to conditional render your loop part like below:

 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>
  );

answered Jan 18, 2022 at 10:46

Surjeet Bhadauriya

7,2243 gold badges39 silver badges54 bronze badges

Collectives™ on Stack Overflow

Nextjs: avoid infinite loop when adding a conditional render

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related