How to update state after an async call inside a map function?

Question

I'm trying to get a data that is returning from axios get method to a method call on aon object. Instead of returning the value, it's returning the promise. What am I missing here?

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

import "./styles.css";

class App extends Component {
  state = {
    totalResults: ""
  };
  componentDidMount() {
    this.setState({
      totalResults: this.fetchData()
        .then(function(res) {
          const r = res.data.totalResults;
          return r;
        })
        .catch(err => console.log("error: ", err))
    });
  }
  fetchData = () => {
    return axios.get(
      "https://newsapi.org/v2/top-headlines?country=us&apiKey=8d98dac05ec947d1b891832495641b49"
    );
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <button onClick={() => console.log(this.state.totalResults)}>
          Click
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's the link to codesandbox

Note: This is just a reference code. I can't do setState because I'm trying to call the method from array.map() iterator instead.

Edit:

This is what actually I'm trying to do: codesandbox.io/s/n5m3qyn65l

For some reason it's showing Network Error

Thanks for helping me out.

That's what axios calls return; I'm not sure where the confusion is. You need to setState in the promise resolution handler. — Dave Newton, Aug 15 '18 at 02:31
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Mark, Aug 15 '18 at 02:31
@DaveNewton I can't do setState on my actual code. This is just a reference code. Actually I had an array of objects that has image guid. I tried to map into the array and using the each guid I wanted to fetch their respective image link. — Tushar Khatiwada, Aug 15 '18 at 02:52
If you can't `setState` in your actual code... then I'm not sure what you're trying to do. If you don't set *some* state it's all rather pointless, whether it's with the immediately-returned data, or another fetch of data based on the first data fetch. The problem is the same, and you'll run in to it again. If you need to fetch additional data you'll want to wait for all promises to resolve from the secondary fetches, and it's handled in essentially the same way. I'd read up on promises first, then consider switching to a different management mechanism like rxjs etc. — Dave Newton, Aug 15 '18 at 02:58
This is what actually I'm trying to do: codesandbox.io/s/n5m3qyn65l For some reason it's showing Network Error — Tushar Khatiwada, Aug 15 '18 at 03:21

Kamalakannan J · Answer 1 · 2018-08-15T04:35:17.337

0

You should setState after getting the response from fetchData() because fetchData() will return promise, which you're setting in the state.

Remember, setState will do assignment only, you can't expect it wait for asynchronous operation. In that case, try async/await

Updated answer:

https://codesandbox.io/s/1r22oo804q

Find the inline comments

edited Aug 15 '18 at 04:35

answered Aug 15 '18 at 02:32

Kamalakannan J

2,818
3
23
51

I can't do setState on my actual code. This is just a reference code. Actually I had an array of objects that has image guid. I tried to map into the array and using the each guid I wanted to fetch their respective image link. – Tushar Khatiwada Aug 15 '18 at 02:38
You get the concept and understand it from the updated code. If you still not able to solve, you can contact me personally or share the actual code here – Kamalakannan J Aug 15 '18 at 02:40
This is what actually I'm trying to do: codesandbox.io/s/n5m3qyn65l For some reason it's showing `Network Error` – Tushar Khatiwada Aug 15 '18 at 03:19

rghossi · Answer 2 · 2018-08-15T04:19:31.567

You should use Promise.all() to fetch all images before updating your articles. Like so:

const res = response.data;

Promise.all(res.map(article => (
  this.fetchImages(article.featured_media)
    .then(image => ({
      title: article.title.rendered,
      content: article.content.rendered,
      featuredImage: image.guid.rendered
    }))
    .catch(err => console.log("Error fetching image: ", err))
    ))
)
  .then(articles => this.setState({ articles }))
  .catch(err => console.log("Error setting up articles: ", err))

score 0 · Answer 3 · answered Aug 15 '18 at 06:30

// Our basic components state setup

    class myComponent extends Component {
        constructor(props) {
            super(props);
            this.state = {
                currentSession: {
                    fullNames: [],
                    contactInfo: []
                }
            }}


// Here we make our function to fetch our API data

    fetchData()
        .then(res => {
                let namesData = res.data.name;
                let contactData = res.data.email;

                this.setState(prevState => ({
                    currentSession: {
                         ...prevState.currentSession,
                                        fullNames: Object.assign(namesData),
                                        contactInfo: Object.assign(contactData)
                                    }
                                }));
                              }); 

// Since it's an async call, we'll put in in a 'componentDidMount' method

        componentDidMount() {
            this.fetchData();               
        }

How to update state after an async call inside a map function?

3 Answers3