Component did mount set state before fetch data

Question

Have this array I am trying to fetch : (as described here )

[{"id":73,"lingarComment":"Mock - 5","fromAge":19,"toAge":28,"hour":20,"minute":30,"date":"2019-07-01T13:28:08.000+0000","singlePropsValuesList":[{"id":66,"singlePropName":{"id":7,"propName":"eventLink"},"propValue":"gg.com"},{"id":67,"singlePropName":{"id":1,"propName":"eventName"},"propValue":"5-Party"},{"id":68,"singlePropName":{"id":8,"propName":"imgUrl"},"propValue":"img1.jpg"},{"id":69,"singlePropName":{"id":6,"propName":"longDescription"},"propValue":"BlaBla Bla"},{"id":70,"singlePropName":{"id":9,"propName":"price"},"propValue":"35"},{"id":71,"singlePropName":{"id":3,"propName":"publisherName"},"propValue":"sarit"},{"id":72,"singlePropName":{"id":5,"propName":"shortDescription"},"propValue":"Bla"}],"multiPropsValuesSet":[{"id":16,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-name"},{"id":17,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-Tel"},{"id":23,"multiPropName":{"id":19,"multiName":"eventType"},"propValue":"vaacation"},{"id":25,"multiPropName":{"id":24,"multiName":"jewLvlKeep"},"propValue":"shabbat"},{"id":30,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"spontanic"},{"id":33,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"personalMeeting"},{"id":14,"multiPropName":{"id":10,"multiName":"area"},"propValue":"south"},{"id":28,"multiPropName":{"id":27,"multiName":"lowSelection"},"propValue":"NA"},{"id":26,"multiPropName":{"id":24,"multiName":"jewLvlKeep"},"propValue":"noShabbat"},{"id":31,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"connector"},{"id":18,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-Mail"}]},{"id":65,"lingarComment":"Mock - 4","fromAge":40,"toAge":64,"hour":20,"minute":30,"date":"2019-07-26T13:28:08.000+0000","singlePropsValuesList":[{"id":58,"singlePropName":{"id":7,"propName":"eventLink"},"propValue":"gg.com"},{"id":59,"singlePropName":{"id":1,"propName":"eventName"},"propValue":"4-Beach Dating"},{"id":60,"singlePropName":{"id":8,"propName":"imgUrl"},"propValue":"img1.jpg"},{"id":61,"singlePropName":{"id":6,"propName":"longDescription"},"propValue":"BlaBla Bla"},{"id":62,"singlePropName":{"id":9,"propName":"price"},"propValue":"25"},{"id":63,"singlePropName":{"id":3,"propName":"publisherName"},"propValue":"Amir"},{"id":64,"singlePropName":{"id":5,"propName":"shortDescription"},"propValue":"Bla"}],"multiPropsValuesSet":[{"id":16,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-name"},{"id":17,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-Tel"},{"id":25,"multiPropName":{"id":24,"multiName":"jewLvlKeep"},"propValue":"shabbat"},{"id":30,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"spontanic"},{"id":33,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"personalMeeting"},{"id":28,"multiPropName":{"id":27,"multiName":"lowSelection"},"propValue":"NA"},{"id":22,"multiPropName":{"id":19,"multiName":"eventType"},"propValue":"speedate"},{"id":31,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"connector"},{"id":18,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-Mail"},{"id":11,"multiPropName":{"id":10,"multiName":"area"},"propValue":"center"}]},{"id":81,"lingarComment":"Mock - 6","fromAge":19,"toAge":28,"hour":50,"minute":70,"date":"2019-10-21T13:28:08.000+0000","singlePropsValuesList":[{"id":74,"singlePropName":{"id":7,"propName":"eventLink"},"propValue":"gg.com"},{"id":75,"singlePropName":{"id":1,"propName":"eventName"},"propValue":"6-Meyzam "},{"id":76,"singlePropName":{"id":8,"propName":"imgUrl"},"propValue":"img1.jpg"},{"id":77,"singlePropName":{"id":6,"propName":"longDescription"},"propValue":"BlaBla Bla"},{"id":78,"singlePropName":{"id":9,"propName":"price"},"propValue":"free"},{"id":79,"singlePropName":{"id":3,"propName":"publisherName"},"propValue":"Ehud"},{"id":80,"singlePropName":{"id":5,"propName":"shortDescription"},"propValue":"Bla"}],"multiPropsValuesSet":[{"id":16,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-name"},{"id":17,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-Tel"},{"id":25,"multiPropName":{"id":24,"multiName":"jewLvlKeep"},"propValue":"shabbat"},{"id":30,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"spontanic"},{"id":33,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"personalMeeting"},{"id":14,"multiPropName":{"id":10,"multiName":"area"},"propValue":"south"},{"id":28,"multiPropName":{"id":27,"multiName":"lowSelection"},"propValue":"NA"},{"id":26,"multiPropName":{"id":24,"multiName":"jewLvlKeep"},"propValue":"noShabbat"},{"id":20,"multiPropName":{"id":19,"multiName":"eventType"},"propValue":"games"},{"id":31,"multiPropName":{"id":29,"multiName":"matchingIdea"},"propValue":"connector"},{"id":18,"multiPropName":{"id":15,"multiName":"contactDetails"},"propValue":"NA-Mail"}]}]

Need to use it in render so I am trying to fetch and set state in componenet did mount :

componentDidMount() {
    //setInterval(this.getData1, 250);
    this.getData1();
    this.getData2();
    this.getData3();
    let arrivedData = this.state.arrivedData3;
    console.log("Did mount - arrived data ", arrivedData)
    this.setState({goodObj1: this.tryToConvert1(arrivedData[1])});
    console.log("this.state.goodObj1",this.state.goodObj1 );



}

getData3:

 getData3 = () => {

//fetch this : api/multiPropNames/10
console.log("getdata3")
fetch(' ws/getEvents' )//Trying to do with ws/getEvents - work
.then(myResponse => myResponse.json())
.then(arrivedData => {
  this.setState({arrivedData3: arrivedData})

});
}

But the set state happen after getData3

*At the render method it works good, but I can't control to determine if the obj is null or not, so I cannot show the component .

score 3 · Answer 1 · answered Jun 30 '19 at 14:49

3

Both fetch() and setState() are asynchronous. This means they do not execute immediately where you see them in your code.

answered Jun 30 '19 at 14:49

Code-Apprentice

81,660
23
145
268

Thanks, so I should handle this? I want this.setState({goodObj1: this.tryToConvert1(arrivedData[1])}); Will be called after getData3() – lingar Jun 30 '19 at 14:57

score 1 · Answer 2 · answered Jun 30 '19 at 15:18

Add loading property to true by default in your components state and set loading to false, when data is fetched. The idea is as follows:

state: {
loading: true,
arrivedData3: null,
}

And then in getData()

this.setState({arrivedData3: arrivedData, loading: false})

Finally in render()

render() {
  return (
    {this.state.loading && !this.state.arrivedData3 && <p>Loading...</p>}
    {!this.state.loading && this.state.arrivedData3 && <p>Render data arrived 3...</p>}
  )
}

The call to `setState()` would have to be in the `.then()` callback in `getData3()` rather than in `getData()`. — Code-Apprentice, Jul 01 '19 at 02:29

score 1 · Answer 3 · answered Jun 30 '19 at 15:36

My Solution (PO) :

Just was need to move the setState to the last callback at getData3 : (and remove it from all other places I try to drop it)

//Trying to get the server object
  getData3 = () => {

//fetch this : api/multiPropNames/10
console.log("getdata3")
fetch(' ws/getEvents' )//Trying to do with ws/getEvents - work
.then(myResponse => myResponse.json())
.then(arrivedData => {
  this.setState({arrivedData3: arrivedData});
  let x = this.tryToConvert1(arrivedData[1]);
  this.setState({goodObj1: x});
  //console.log("getdata3 - arrivedData " , arrivedData);
  //console.log("getdata3 - goodObj1 " , this.state.goodObj1);
  //console.log("getdata3 - method ?? " ,  this.tryToConvert1(arrivedData[1]));
}

Component Did mount :

componentDidMount() {

    this.getData3();

}

Yes, this is one solution. Also look at the answer from Janiis that uses a `loading` flag. That suggestion has the advantage that you can provide feedback (such as an image or animation) to the user that something is happening. — Code-Apprentice, Jul 01 '19 at 02:31
Indeed , but that wasn't the problem because I already have handle the null situation but the problem was that in any loop the function wasn't work after the data arrived. So I asked about the execution order. — lingar, Jul 01 '19 at 09:54

Component did mount set state before fetch data

3 Answers3