reactjs - 即使在回调之后 setState 也不会更新。在循环中调用 this.state.loop 不会呈现更新的状态

Question

在这里，我使用 await 和回调将 setstate 设置为我的 store_result 状态并使其成为 await 调用。因此，当我调用该函数时，它已经更新了。我阅读了许多相关帖子并添加了回调，但我似乎无法理解为什么这不起作用。

await this.setState({ store_result: this.state.store_result}, function () {
      console.log(this.state.store_result);
    });


    this.CalculateDetails();

当我使用 setState 进行 console.log(store_results) 时，状态会更新，但 handleDetails 仍会收到一个空的 store_result。

handleSelect = async address => {
    let results = await  geocodeByAddress(address)
    let latLng = await getLatLng(results[0]);
    this.state.coordsPair.push(latLng);

    let codeResults = await geocodeByAddress(address)

    console.log(this.state.coordsPair)
    const {coordsPair} = this.state;
    const {store_result}= this.state;

    let map = new google.maps.Map(document.createElement('div'));
    this.googlePlaces = new google.maps.places.PlacesService(map);

    var request = {
      location: coordsPair[0],
      radius: '5000',
      type: ['restaurant','point_of_interest']
    };

    
    this.googlePlaces.nearbySearch(request, callback);

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        console.log(results.length);
        for (var i = 0; i < results.length; i++) {
          store_result.push(results[i].place_id)
        }
      }
    }

    await this.setState({ store_result: this.state.store_result}, function () {
      console.log(this.state.store_result);
    });


    this.CalculateDetails();

  };

这是回调设置状态后调用的函数。

CalculateDetails(){
 
  console.log("details");

    const {store_result}= this.state; 
    const {details} = this.state;
    var wait;
    for(var i = 0; i < store_result.length; i++) {
      //console.log("4");
      let map = new google.maps.Map(document.createElement('div'));
      this.googlePlaces = new google.maps.places.PlacesService(map);

      var request2 = {
        placeId: store_result[i],
        fields: ['name', 'rating', 'formatted_phone_number', 'geometry','website','opening_hours','review','price_level']
      };
      //console.log("1");
  
      this.googlePlaces.getDetails(request2, callback2);

      function callback2(place, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          details.push(place);
  
        }
    }
   
  }

 this.setState({ details: this.state.details}, function () {
      console.log(this.details);
    });
}

当前更新 我已将我的 handleSelect 函数更新为

 handleSelect = async (address) => {
    let results = await geocodeByAddress(address);
    let latLng = await getLatLng(results[0]);
    this.state.coordsPair.push(latLng);
  
    let codeResults = await geocodeByAddress(address);
  
    console.log(this.state.coordsPair);
    const { coordsPair } = this.state;
    const { store_result } = this.state;
    const store_result_updated = [...store_result]; //<----here
  
    let map = new google.maps.Map(document.createElement("div"));
    this.googlePlaces = new google.maps.places.PlacesService(map);
  
    var request = {
      location: coordsPair[0],
      radius: "5000",
      type: ["restaurant", "point_of_interest"],
    };
  
    this.googlePlaces.nearbySearch(request, callback);
  
    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        console.log(results.length);
        for (var i = 0; i < results.length; i++) {
          store_result_updated.push(results[i].place_id);//<----here
        }
      }
    }
  
    this.setState({ store_result: store_result_updated }, function () {
      //<----here
      console.log(this.state.store_result);
      this.calculateDetails();

    });
  
  };

这是当前对 calculateDetails() 的更新。奇怪的是 check1 打印一个长度为 0 但 check2 甚至没有打印出 for 循环内的长度。

calculateDetails(){
 
  console.log("details");

    const {store_result}= this.state; 
    const {details} = this.state;
  
    const details_updated = [...details]; //<----here

    let map = new google.maps.Map(document.createElement('div'));
    this.googlePlaces = new google.maps.places.PlacesService(map);
    console.log(store_result.length);//-> check1

    for(var i = 0; i < store_result.length; i++) {
      console.log(this.state.store_result.length); //check2
      

      var request2 = {
        placeId: store_result[i],
        fields: ['name', 'rating', 'formatted_phone_number', 'geometry','website','opening_hours','review','price_level']
      };
      
      this.googlePlaces.getDetails(request2, callback2);

      function callback2(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          details_updated.push(place);
  
        }

        
    }

    this.setState({ details: details_updated}, function () {
      console.log(this.state.details);
   });
   
  }

}

标签： reactjscallbackreact-reduxstatesetstate

Answer 1

你不能await setState，因为它不是一个异步函数。在设置状态后调用作为第二个参数的回调setState。这是你打电话的地方CalculateDetails（应该命名为calculateDetails）。