javascript - 组件在获取数据之前安装了设置状态

Question

拥有我正在尝试获取的数组:(如所述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"}]}]

需要在渲染中使用它，所以我尝试在 componenet 中获取并设置状态确实安装:

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 );



}

获取数据3:

 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})

});
}

但是设置状态发生在getData3之后

*在渲染方法中效果很好，但我无法控制确定 obj 是否为 null，因此无法显示组件。

Answer 1

fetch() 和 setState() 都是异步的。这意味着它们不会立即执行您在代码中看到的位置。