`object' is undefined due to async function that fetched data in useEffect hook in reactjs

Question

I am fetching an object from api using axios.get("url"). The object fetched successfully (in Animal state) but there is a component level state (imageState) which requires updation using setState with fetched data.
Code:
Component:

import React,{useEffect, useState} from 'react'
import axios from 'axios'
const AnimalDetail = ({match}) => {
    const [Animal ,setAnimal ] = useState({})
    const Id = parseInt(match.params.id)
    const [imageState, setImageState] = useState ("");
 
useEffect(()=>{
            const fetchAnimal = async () => {
                const {data} = await axios.get(`/api/animals/${Id}`)
                setAnimal(data)
            }
            fetchAnimal()
            // setImageState(Animal.image[0])   // need to access first index of image object
    },[])

    useEffect(()=>{

   setImageState(Object.values(Animal.image)[0])  // error cant convert undefined to object
}
   
    return (
        <>
       <h2>imageState </h2>  //undefined
        <h2>{typeof(Animal.image)}</h2>  //gives object
       </>
  )
}
export default AnimalDetail

Backend Api :

{"id":2,
"image":["/image.jpg","/image2.jpg"],
"price":60000,
"breed":"",
"isAvailable":true,
"weight":110,
}

How can i fetch the data and update the component level state periodically(after fetching)?

Can you console.log(data) and edit your post to tell me what you get? — Michael Hoobler
– Michael Hoobler, Commented Apr 12, 2021 at 18:36
It looks like you declare imageState a second time after your useEffect. This is not the main problem, but you will need to delete that line eventually. — samuei
– samuei, Commented Apr 12, 2021 at 18:36
Is there a compelling reason not to do setImageState(data.image[0]) inside fetchAnimal? — samuei
– samuei, Commented Apr 12, 2021 at 18:37
@samuei yes there is no problem is doing that too. The real problem still here with me is the typeof(Animal.image) that gives object but when i just console.log(Animal.image) then i get Array ["img1",''img2"]. I actually need to map these images into divs. — MUHAMMAD ZAIN
– MUHAMMAD ZAIN, Commented Apr 12, 2021 at 21:30
@MichaelHoobler I assigned {data} to component state(Animal) and when i console.log(Animal) i get an object in console like this Object { id: 1, image: (1) […], breed: "", isAvailable: true, weight: 100, … }. — MUHAMMAD ZAIN
– MUHAMMAD ZAIN, Commented Apr 12, 2021 at 21:36

Shyam · Accepted Answer · 2021-04-26 10:47:14Z

You can try following, maybe this can help you. Removed the second useEffect and updated the image state in the first useEffect.

And also I can see, you have declared const [imageState, setImageState] = useState (""); twice. You can remove the second one.

Also, make sure you handle the API error in useEffect otherwise this may break the application on API failure.

import React, { useEffect, useState } from 'react';
import axios from 'axios';
const AnimalDetail = ({ match }) => {
  const [Animal, setAnimal] = useState({});
  const Id = parseInt(match.params.id);
  const [imageState, setImageState] = useState('');

  useEffect(() => {
    const fetchAnimal = async () => {
      const { data } = await axios.get(`/api/animals/${Id}`);
      setAnimal(data);
      setImageState(data.image[0]);
    };
    if (Id) {
      fetchAnimal();
    }
  }, [Id]);

  return (
    <>
      <h2>imageState </h2> //undefined
      <h2>{typeof Animal.image}</h2> //gives object
    </>
  );
};
export default AnimalDetail;

Vahid18u · Accepted Answer · 2021-04-12 18:48:29Z

2

your code has some error in the second useEffect. you can use this one :

     useEffect(() => {
if (Animal) setImageState(Object.values(Animal.image)[0]); // error cant convert undefined to object
      }, [Animal]);

this is because the Animal should have value first. and you are defining imageState two times in your code! the first one is enough.

edited Apr 12, 2021 at 18:48

answered Apr 12, 2021 at 18:42

Vahid18u

4031 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

`object' is undefined due to async function that fetched data in useEffect hook in reactjs

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