Using a function to get API data and populate a provider

Question

I try to fetch data from API using a function and then setState in my React provider.

It works fine if I'm doing it in componentDidMount directly like this:

componentDidMount() {
axios({
  method: "post",
  url: "https://example.com",
  // data: formData,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  }
}).then(res => {
  this.setState({
    TabPass: res.data
  });
});
    }

I tried to get to the same result but with axios put in function in a separate file and once I get the data, I perform a setState in my provider.

I've tried this in api.js

export function GetPass ()
{
    axios({
        method: "post",
        url: https://example.com",
        // data: formData,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        }
      })
        .then(res => {
            return res.data;
        }
        )
}

In Provider.js

  componentDidMount() {

    const Tab = GetPass();
      this.setState({
        TabPass:Tab,
      })
    }
  }

Tab is undefined

Please post the code that isn't working for you so we can point out what needs to be fixed. — joshwilsonvu, Oct 01 '19 at 13:59
Possible duplicate of [Use Async/Await with Axios in React.js](https://stackoverflow.com/questions/46733354/use-async-await-with-axios-in-react-js) — prasanth, Oct 01 '19 at 14:07
This is because you're not waiting for the call to complete, your axios request is asynchronous — Nathan, Oct 01 '19 at 14:10
I'm aware of that what I' don't know is how to wait for the call to be complete using a separate function when I use setState — Sam, Oct 01 '19 at 14:22

A-P · Accepted Answer · 2019-10-01T15:02:28.077

0

In api.js

export function GetPass ()
{
    //Following will return a promise with the data once resolved
    return axios({
        method: "post",
        url: https://example.com",
        // data: formData,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        }
      })
        .then(res => {
            return res.data;
        }
        )
}

In Provider.js

componentDidMount() {
    // As the axios promise will resolved your state will change
    GetPass()
      .then(Tab => { this.setState({
        TabPass: Tab,
      }))
    }}

edited Oct 01 '19 at 15:02

answered Oct 01 '19 at 14:34

A-P

198
1
12

1

Thanks for the answer. In the provider Tab is now a promise but I don't have the result (sorry I'm not an expert with react :) ) – Sam Oct 01 '19 at 14:40
Try following ``` const Tab = GetPass().then(data => ``` – A-P Oct 01 '19 at 14:44
I'd like to mark answer as correct but as I told you in my previous comment my const is not the result but a promise (with PromiseStatus and PromiseValue). How can I access the result ? – Sam Oct 01 '19 at 14:46
I have updated above answer. Check and revert if still got issue :) – A-P Oct 01 '19 at 15:01
1

Exactly what I neeeded. Thanks a lot – Sam Oct 02 '19 at 06:22

Using a function to get API data and populate a provider

1 Answers1