useEffect not running on refresh

Question

I'm having an issue with the useEffect hook on this blog site I'm building. Im trying to fetch all the blogs from the backend so I can use them to populate this section with the latest five blogs. When I use the code below, the empty array in the useEffect prevents the infinite amount of fetch calls, which is great.

But then I run into a problem where if I refresh the page or navigate back to it I get an error on line 35 saying "cannot find mainImage of undefined".

My question is how do I have the fetchCall populate the state and do so even on a refresh so that I can still access the info I need. Thanks!

import React, {useState, useEffect} from 'react';
import CardItem from './CardItem';
import './Cards.css';

function Cards() {
  const [blogs, setBlogs] = useState();

  useEffect(() => {
      fetchBlogs();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[]);

  const fetchBlogs = async () => {
    console.log('ok');
    const response = await fetch('http://localhost:3000/blogs');
    const data = await response.json();
    setBlogs(data);
  };


  return (
    <div className='cards'>
      <div className='header-container'>
        <img
          className='logo'
          alt='logo'
          src='https://Zi.imgur.com/MaLqLee.png'
        />
        <h1 className='cards-title'>Hot takes and hometown bias</h1>
      </div>
      <div className='cards-container'>
        <div className='cards-wrapper'>
          <ul className='cards-items'>
            <CardItem
              src={blogs.length > 0 ? blogs[0].mainImage : ''}
              text="Don't look now, but Zach Lavine officially kicks ass."
              label='Bulls'
              path='/bulls'
            />
            <CardItem
              src='https://i.imgur.com/EmVgHk2.jpg'
              text='The curious case of Mitch Trubisky apologists.'
              label='Bears'
              path='/bears'
            />
          </ul>
          <ul className='cards-items'>
            <CardItem
              src='https://i.imgur.com/ZZ5dLJU.jpg'
              text='How Did We Get Here? The Suddenly Bleak State of the Cubs.'
              label='Cubs'
              path='/cubs'
            />
            <CardItem
              src='https://i.imgur.com/MwgKmUM.jpg'
              text='Pace and Nagy: So, how much can we blame these guys?'
              label='Bears'
              path='/bears'
            />
            <CardItem
              src='https://i.imgur.com/Y2Eorvu.jpg'
              text='Thad Young: An Ode to the NBA Journeyman.'
              label='Bulls'
              path='/bulls'
            />
          </ul>
        </div>
      </div>
    </div>
  );
}

export default Cards;

We need full code or at least some part of it but not as a screenshot — Sowam, Apr 20 '21 at 15:03

MaartenDev · Accepted Answer · 2021-04-20T15:28:04.567

3

The fetch call is asynchronous. This means it is not guaranteed to be complete before the program enters the next line.

Because of this the blogs array will be empty at the first render. You can add an check in the src CardItem component to only use the value returned from the fetch call when it is available:

<CardItem
  src={blogs.length > 0 ? blogs[0].mainImage : ''}
  ...
/>

An alternative would be to use the fact that blogs is an array and use the map operator to build one or more CardItems.

<ul className='cards-items'>
  {blogs.map(blog => <CardItem
    src={blog.mainImage}
    ...
  />)}
</ul>

edited Apr 20 '21 at 15:28

answered Apr 20 '21 at 15:05

MaartenDev

5,631
5
21
33

Ok, I've tried both solutions and they both seem to result in the same problem I had to begin with. On their initial render, they work fine, but then when I refresh, blogs is undefined. – David Fertitta Apr 20 '21 at 15:45
Actually I just deleted the [] in useState, and once I put them back in this seemed to work! – David Fertitta Apr 20 '21 at 15:53

score 2 · Answer 2 · edited Sep 26 '21 at 07:04

I faced the same problem, and here is how I solved it..

First, I created a loading state, and set the initial state to true.

//  const [singlePackage, setPackage] = useState([]);

    const [isLoading, setLoading] = useState(true);

then, in the useEffect hook, I set the state to false like so..

useEffect(() => {
   axios.get(baseURL).then((response) => {
      setPackage(response.data);
    setLoading(false);
  })
}, []);

Then, I used a condition, if the loading state is true, return the spinner else return the component like so...

if (isLoading) {
    return (
      <div  className="loadingContainer">
      <Loader
      type="ThreeDots"
      color="#00b22d"
      height={100}
      width={100}
       //3 secs
    />
    </div>
    )
  } else {

    return (
     // your code here
)}

I am using react-loader-spinner, and just styled the container you can install it using...

npm install react-loader-spinner --save

the style for container ...

.loadingContainer{
  position: fixed;
  top: 50%;
  left:50%;
  transform: translate(-50%,50%);
}

useEffect not running on refresh

2 Answers2