Question

144

Using .map() with useEffect and Api

rated 0 times [ 151] [ 7] / answers: 1 / hits: 18355 / 4 Years ago, sun, march 8, 2020, 12:00:00

I am trying to use the useEffect to grab some data from an API. I am succesful in grabbing the data but after I set my state and try to map through it I just get Can't read map of undefined. I think the problem is that it's running my .map() code before it gets the response. i am just unsure of how to solve this

This is the api response:

data: {count: 87, next: https://swapi.co/api/people/?page=2, previous: null, results: Array(10)}

Here is my code

import React, { useState, useEffect } from 'react';

import axios from 'axios';

import './App.css';

import CharacterMap from './characterMap'



const App = () => {

  let [getChars, setChars] = useState(0);

  useEffect(() => {

    axios.get(`https://swapi.co/api/people/`)

      .then(res => setChars(res) )

  },[]);

 console.log(getChars.data.map((e) => e))

  return (



    <div className=App>

      <CharacterMap info={getChars} />

    </div>

  );

}

export default App;

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emiliano

Add To Favorites

Follow

Total Points: 381

Total Questions: 109

Total Answers: 93

Location: Jersey

Member since Fri, Oct 1, 2021

3 Years ago

emiliano questions

1 Jest: Share Variables Between Test Files

Tue, Sep 1, 20, 00:00, 4 Years ago

1 Promise.all not working with an array of async functions

Sun, Jul 26, 20, 00:00, 4 Years ago

1 Discord.js: Fetch message from ALL channels

Fri, Jun 12, 20, 00:00, 4 Years ago

1 How to spoof a closed google form (...no longer accepting responses)? I want to submit a form after deadline

Thu, Jun 4, 20, 00:00, 4 Years ago

1 concurrently command not found but installed gloabally

Sat, Apr 25, 20, 00:00, 4 Years ago

View All

answered 4 Years ago daijab · Accepted Answer

axios.get is an async function and you are trying to get the data outside of an async function which is no completed yet.

You could use useEffect with dependency array which is equal to componentDidUpdate to get the data.

Initialized the state with the same datatype that you expect, in this case we expect an array you initialized ith with empty array.

import React, { useState, useEffect } from 'react';

import axios from 'axios';

import './App.css';

import CharacterMap from './characterMap'



const App = () => {

  let [chars, setChars] = useState([]);

  useEffect(async () => {

    try{ 

      let response = await axios.get(`https://swapi.co/api/people/`)

      let data = await response.json();

      setChars(data);

    } catch(error) {

       console.error(error.message);

    }

  },[]);

 // If you want to access the updated state then use this.

  useEffect(() => {

     let newState = chars.map((e) => e); // map your state here

     setChars(newState); // and then update the state

     console.log(newState);

  },[getChars]);



  return (



    <div className=App>

      <CharacterMap info={chars} />

    </div>

  );

}

export default App;

The second useEffect hook trigger on each state update and so you can get the updated state here.

It will also trigger a re-render so you can also use the map in return statement;

Or you could update the data on axios response and then set the state. Recommended

useEffect(async () => {

    try{ 

      let response = await axios.get(`https://swapi.co/api/people/`)

      let data = await response.json();

      let newState = data.map((e) => e); // map your state here

      setChars(newState); // and then update the state

      console.log(newState);

    } catch(error) {

       console.error(error.message);

    }

  },[]);