響應 axios post request 和 setState on props 更改

Question

我有一個反應應用程序，我正在使用地理定位來獲取用戶位置。

按照初始化的說明我已經包裝了組件：

export default geolocated({
    positionOptions: {
        enableHighAccuracy: true,
    },
    userDecisionTimeout: 15000,
})(ShowPois);

一旦用戶接受（允許）在瀏覽器上查找位置，我希望發生兩件事。

首先，當應用程序可以使用位置時，我需要設置一個標志，所以我有這個：

static getDerivedStateFromProps(props, state) {
        if (!state.geolocatedReady && props.coords) {
            return {
                geolocatedReady: true
            }
        }
        return null;
    }

注意 props.coords 來自 geolocated

第二件事是我想用找到的位置的地址來完成一個輸入框。 為了做到這一點，我必須向 api 發出一個 post 請求來獲取地址，但問題是我不能使用 getDerivedStateFromProps() 方法，因為該方法必須返回一個值，而不是一個承諾（由 axios 發布請求） .

那么如何在組件中的 prop 更改時發出 post 請求，然后設置狀態？

Answer 1

getDerivedStateFromProps僅適用於邊緣情況。 你在這里的情況聽起來很適合componentDidUpdate 。

componentDidUpdate() {
  if(!this.state.geolocatedReady && this.props.coords) {
    this.setState({
      geolocatedReady: true,
    });
    this.getAddress(this.props.coords);
  }
}
getAddress = async (coords) => {
  const address = await mapApi.getAddress(coords);
  // or whatever you want with it.
  this.setState({
   address 
  })
}