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

});
}

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

*在render方法上它很好用，但是我无法控制确定obj是否为null，因此无法显示component。

Answer 1

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

Answer 2

默认情况下，在组件状态下将loading属性添加为true，并在获取数据时将loading设置为false。这个想法如下：

metatag.format(city_name=city.name, country_name=country.name)

然后在getData（）

中

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

最后进入render（）

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

Answer 3

我的解决方案（PO）：

只需要将setState移至getData3的最后一个回调：（并将其从我尝试放下的所有其他位置删除）

//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]));
}

组件已安装：

componentDidMount() {

    this.getData3();

}

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

3 个答案: