React - 然后无法在 Promise 内设置状态 [英] React - Unable to setState inside a Promise then

问题描述

我正在尝试在 Promise 的 then() 内设置状态，但是状态值没有被保存并且在 then() 之外无法访问.

I'm trying to set the state inside a then() of a Promise, but the state value is not getting saved and is not accessible outside of the 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 值.但是如果我在 then() 块中使用 console.log，我会得到正确的值.在这种情况下如何设置状态?

If I console.log(this.state.location_latitude) I get a null value. But if I console.log inside the then() block, I get the correct value. How do I set the state in this case?

更新说明:

为了更好地说明这里的整个逻辑:我正在使用 Google Places Autocomplete 组件，该组件允许用户从下拉列表中选择一个位置.当用户从下拉列表中选择一个位置时，将调用上述方法 handleSelect.然后我使用 geocodeByAddress 方法提取用户选择的地点的纬度和经度，这是一个承诺.然后我需要检索纬度和经度并相应地设置状态，稍后用于发送到数据库.我还不能将值提交到数据库，因为用户需要填写其他表单输入(也存储在状态中)，一旦他点击提交，我将提交所有状态元素单个调用后端.所以，我不想用 componentDidMount() 更新任何东西，也没有东西要使用 componentDidUpdate() 更新.无论如何，我只能将状态值存储在 geocodeByAddress 的 then 中(如果我在这里错了，请纠正我).所以，我必须能够修改 then 块内的状态值.

To give a better context to the whole logic here: I'm using a Google Places Autocomplete component which allows the user to select a location from the dropdown. The above method handleSelect is called when the user selects a location from the dropdown. I then extract the latitude and longitude of the place selected by the user using the geocodeByAddress method, which is a promise. I need to then retrieve the latitude and longitude and set the state accordingly, which is later used to send to the database. I can't submit the value to the database yet because there are other form inputs that the user needs to fill (which are also stored in the state) and once he clicks on Submit, I'll be submitting all the state elements in a single call to the backend. So, there is nothing I want to update with componentDidMount() or nothing is getting updated yet to use componentDidUpdate(). In any case, I can only store the state value inside the then of geocodeByAddress (please correct me if I'm wrong here). So, I HAVE to be able to modify the state value inside the then block.

推荐答案

问题是当您set-state 之后，您无法立即看到状态结果.这就是 console.log 返回 null 的原因.确保您的 console.log 在 render block 中.这是因为 set-state 操作是 异步 并且被批处理以提高性能.这在 setState 的文档中进行了解释.看看这个 => 为什么 reactjs 中的 setState 是异步的同步?

The thing is when you set-state you can't see the state result immediately after that. That's why the console.log returns null. Make sure your console.log is in the render block. This is because set-state actions are asynchronous and are batched for performance gains. This is explained in documentation of setState. Take a look at this => Why is setState in reactjs Async instead of Sync?

这篇关于React - 然后无法在 Promise 内设置状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！