I'm usuing an API fro fetching data and it works just fine, BTW I'm uising redux. when I refresh my project. I get this error. I also Have et loading so when data is not fetched, waits for it. I have no clue what to do

This is the component which I used data in

import React, { useEffect } from 'react';
import { useSelector, useDispatch} from 'react-redux';
import { Link } from 'react-router-dom';
import millify from 'millify';

//Redux
import { fetchCoins } from "../../redux/coins/coinsAction";

const Homepage = () => {

   const dispatch = useDispatch();
   const {coins, loading } = useSelector(state => state.coinsState);

   useEffect(() => {
      dispatch(fetchCoins());
   }, [])
   console.log(coins);


   return (
    <>
        {
            loading ? <h1>Loading...</h1> :
            <div>
                <h2>Global Crypto Stats</h2>
                <div>
                    <h5>Total Cryptcurrencies</h5>
                    <span>{millify(coins.data.stats.total)}</span>
                    <h5>Total Exchanges</h5>
                    <span>{millify(coins.data.stats.totalExchanges)}</span>
                    <h5>Total Market cap</h5>
                    <span>{millify(coins.data.stats.totalMarketCap)}</span>
                    <h5>Total 24h Volume</h5>
                    <span>{millify(coins.data.stats.total24hVolume)}</span>
                    <h5>Total Markets</h5>
                    <span>{millify(coins.data.stats.totalMarkets)}</span>
                </div>
            </div>
        }
        
    </>
   );
};

export default Homepage;

CodePudding user response：

When facing this issue, the main solution is to put "?" before each dots, it should look like this :

coins?.data?.stats?.total

Try this :)