react get data from rest api with axios and and useEffect redering empty array plus array with data

Question

I am trying to render data from rest api site, I can get all info without issues, but is duplicating the data with an empty array first and this is creating a conflict with the map() function.

when I do a console logo I can see the duplication. what I need is to only get the array that has the data and the empty one or how can I select the array with data, since for somereason when i used the map() function I get error because its reading the empty array

useFetchData.js

import { useEffect, useState} from 'react';
import http from '../../services/httpservices';
import config from '../../services/config.json';

const useFetchData = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);

 useEffect(() => {
 const fetchData = async () => {
  try {
    const { data: response } = await http.get(config.apiEndpoint);
    setData(response);
  } catch (error) {
    console.error(error)
  }
   setLoading(false);
  };

   fetchData();
  }, []);
 return {
  data,
  loading,
 };
};

export default useFetchData;

customsite.jsx

  import React, { useState } from 'react';
  import Modal from './reusable/modal';
  import useFetchData from './hooks/useFetchData';

  const Customsite = ()=> {

const {
    data,
    loading,
  } = useFetchData();


  console.log(data);

return(
    <div>
     <p> we here </p>

            
               </div>
     )
     }

  export default Customsite

julBayonna · Accepted Answer · 2022-06-08 05:53:20Z

1

you only need to wait until the data has loaded to get the full array, you must condition the console log to loading === false


!loading && console.log(data);

the same goes with the map function you want to use. you need to add this condition. Either that or test if data.length > 0

answered Jun 8, 2022 at 5:53

julBayonna

44912 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

react get data from rest api with axios and and useEffect redering empty array plus array with data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related