Why ReactJS state cannot be accessed in componentDidMount

Question

I am pulling the data from MongoDB database using axios and set the value to a state value named invoices

I do this in componentDidMount. And again I want to access that state (i.e. invoices) within the componentDidMount. I am trying to set invoices value to another state value called dataa. But always ends up getting empty/null.

Problem is the state has Not been set, value is empty

This is what my code snippet looks like:

componentDidMount() {

axios
  .get("http://localhost:4005/purchaseinvoices")
  .then(response => {
    this.setState({
      invoices: response.data //setting value to invoices
    });
  })
  .then(
    this.setState({
      dataa: this.state.invoices //setting value to dataa
    })
  )
  .catch(err => {
    console.log(err);
  });

  //but this gives 0
  alert(this.state.invoices.length)

}

what is the possible cause of problem and how can I fix this?

Possible duplicate of [React setState not Updating Immediately](https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately) — Drew Reese, Oct 05 '19 at 16:02

Diamond · Answer 1 · 2019-10-05T15:56:23.180

0

That's because axios and setState are asynchronous.

But, you can see updated stated in componentDidUpdate or in render function.

Edit: Also you can access just the stated is updated like below;


axios
  .get("http://localhost:4005/purchaseinvoices")
  .then(response => {
    this.setState({
      invoices: response.data, //setting value to invoices
      dataa: response.data
    }, () => {
      alert(this.state.invoices.length)
    });
  })
  .catch(err => {
    console.log(err);
  });
}

edited Oct 05 '19 at 15:56

answered Oct 05 '19 at 15:23

Diamond

3,470
2
19
39

Yes. But I need to see the changes when the page loads. I am using that `data` state value on a component. So I need to see the changes when the component mounted. How can I do this? – BhagyaKolitha Jayalath Oct 05 '19 at 15:25
Thank you for this approach. And the other problem is I need to update `dataa` state value too. for this. I have some pre-configured data object. I need to add what I get from `invoices` to that. I am doing that(concatation) in the callback function and try to to `setState({dataa: this.state.invoices})` it gives me this error **Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.** – BhagyaKolitha Jayalath Oct 05 '19 at 15:45
@BhagyaKolithaJayalath You can updated `dataa` as updating `invoices`. I updated my answer. – Diamond Oct 05 '19 at 15:47
Honestly this is what I am trying to do. When I do this, I get this error I mentioned in the above comment. This is what I am trying to do `axios .get("http://localhost:4005/purchaseinvoices") .then(response => { this.setState({ invoices: response.data }, () => { TableValues.rows = this.state.invoices this.setState({ dataa: TableValues }) }); }) .catch(err => { console.log(err); });` – BhagyaKolitha Jayalath Oct 05 '19 at 15:50
It seems like there's a problem in using state values. It can be better to provide more detail information about that in your question. Then I can help you. – Diamond Oct 05 '19 at 15:53
Is there a way I can contact you? maybe chat? – BhagyaKolitha Jayalath Oct 05 '19 at 15:58
I don't have enough reputation to use chat box :( – BhagyaKolitha Jayalath Oct 05 '19 at 16:06
@BhagyaKolithaJayalath Then please add information as comment. :) – Diamond Oct 05 '19 at 16:07
I should provide the full snippet then only you can understand. Otherwise it cannot be explain easily and understandably – BhagyaKolitha Jayalath Oct 05 '19 at 16:09

score 0 · Answer 2 · answered Oct 05 '19 at 15:36

Update the data directly from response instead of using this.state.invoices.since this.setState is an async call,takes some ms delay to update the state.

 componentDidMount() {
    axios
      .get("http://localhost:4005/purchaseinvoices")
      .then(response => {
        this.setState({
          invoices: response.data //setting value to invoices
          data: response.data
        });

      })
      .catch(err => {
        console.log(err);
      });


    }

If you want to see the data on first load of page ,try server side rendering

Why ReactJS state cannot be accessed in componentDidMount

2 Answers2