反应-无法在promise内设置状态

Question

我试图在promise的then（）内设置状态，但状态值未保存，在then（）外无法访问。

以下是更新后的代码：

handleSelect = location => {
  this.setState({ location });
  geocodeByAddress(
    location
  )
  .then(results => getLatLng(results[0]))
  .then(latLng => {
    this.setState({
      location_latitude: latLng.lat,
      location_longitude: latLng.lng,
    })
    console.log(this.state.location_latitude); // returns the correct value
  })
  console.log(this.state.location_latitude); // returns null (the originally declared value)
}

如果我console.log（this.state.location_latitude）我得到一个null值。但是，如果我console.log在那么（）块，我得到正确的值。在这种情况下如何设置状态？

更新的说明：

为了给整个逻辑提供更好的上下文：我使用了一个GooglePlacesAutoComplete组件，它允许用户从下拉列表中选择一个位置。当用户从下拉列表中选择位置时，将调用上述方法handleSelect。然后，我使用geocodeByAddress方法提取用户选择的地点的纬度和经度，这是一个promise。然后，我需要检索纬度和经度，并相应地设置状态，稍后用于发送到数据库。我还不能将值提交到数据库，因为用户需要填写其他表单输入（也存储在状态中），一旦他单击submit，我将在一次对后端的调用中提交所有状态元素。因此，我不想使用componentDidMount（）更新任何内容，也不想使用componentdiddupdate（）更新任何内容。在任何情况下，我只能将状态值存储在geocodeByAddress的then中（如果我在这里出错，请更正）。因此，我必须能够修改然后块中的状态值。




Answer 1

您需要将函数上下文绑定到当前类/组件。试试下面的方法。创建一个像“callSetState”这样的函数，将其与此绑定，并在调用时将值作为参数传递给它。

import React, { Component } from 'react';
class Test extends Component{
    constructor() {
        super()
        this.callSetState = this.callSetState.bind(this);
    }

    callSetState(latitude, longitude) { 
        this.setState({
            location_latitude: latitude,
            location_longitude: longitude,
        })
    }

/* Call this func in your class and call callSetState which is already bound to your component in constructor */

    // geocodeByAddress(location)
    //     .then(results => getLatLng(results[0]))
    //     .then(latLng => this.callSetState(latLng.lat, latLng.lng));

}

Answer 2

问题是，当您设置状态时，您无法立即看到状态结果。这就是为什么console.log返回null。确保您的控制台.log位于渲染块中。这是因为设置状态操作是异步的，并且是为了提高性能而批处理的。setState的文档中对此进行了解释。看看这个=