React JS + Axios return undefined first

Question

I trying make an axios get from context file into function and call this from component to return data.

Context file:

const getPets = async () => {
await axios.get('http://localhost:1337/api/pets?populate=*')
  .then((res) => {
    return res.data
  })
  .catch(err => {
    console.log(err)
 })}

Component file:

const [pets, setPets] = useState([])

useEffect( () => {
setPets(getPets())},[])

return (console.log(pets))

The return value is undefined and i don't know why. Can we help me please?

Tks!

Art Bauer · Accepted Answer · 2022-09-02 17:17:20Z

2

Modify getPets():

const getPets = async () => {
    const res = await axios.get('http://localhost:1337/api/pets? populate=*');
    return res.data;
}

getPets() returns a promise

useEffect(() => {
    getPets().then(res => setPets(res));
}, []);

return (
    <>
        {pets?.map(pet => { /* some JSX */})}   
    </>
);

edited Sep 2, 2022 at 17:17

answered Sep 2, 2022 at 16:27

Art Bauer

4892 silver badges5 bronze badges

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

16 Comments

Tecram Over a year ago

Thaks for your answer. I try this and still returns undefined in component file return.

Art Bauer Over a year ago

That is because you are returning the result of the function call return (console.log(pets)) -- it writes pets into the console, but returns undefined. You might want return pets;. In this case the component will return twice (since useEffect is async). To prevent that you might also want to use useLayoutEffect() instead, but ususally it is not necessary

Tecram Over a year ago

Ok, i undertand. But in return i need execute a map function to render data and still doesn't work. Sorry.

Art Bauer Over a year ago

Modified my answer. Please check

Tecram Over a year ago

Into the return of component i have this: {pets.map((pet, index) => (console.log(pet)))} and in browser give me this error: Uncaught TypeError: Cannot read properties of undefined (reading 'map')

|

Collectives™ on Stack Overflow

React JS + Axios return undefined first

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related