使用componentDidMount中的狀態發出帶有變量的axios請求

Question

問題介紹

我正處於學習階段，我正在嘗試使用react和redux構建一個項目。 我已經創建了動作，Reducer和組件，到目前為止，從我的API獲取數據非常好。 現在，我嘗試調用axios請求（存在於操作中），但URL中有一個變量，但該變量處於狀態。 基本上我想實現的是：

componentDidMount() {
        //call action to load profile data
        let address = this.props.checkweb.address;
        this.props.loadProfile(address);
    }

上面的代碼的問題在於，安裝組件時address為空，並且在很短的時間后變為可用。 如果我使用setTimeout ，它可以工作，但是我不知道這是否是一個好方法。 此代碼有效 。

componentDidMount() {
        //wait 1 sec and call action to load profile data
        setTimeout(function() {
           let address = this.props.checkweb.address;
           this.props.loadProfile(address);
        }, 1000); 
    }

上面的代碼可以正常工作，並且可以加載我的數據，但是正如我提到的，我不知道這樣做是否合適，並且不會造成未來的問題？ 當然，我會做一些if/else檢查address是否有值，但是為了簡單起見，我這樣寫。

我將發布Component，Action和Reducer的代碼，以更好地了解該函數

在其中創建loadProfile()的操作部分

export const loadProfile = (address) => (dispatch) => {
   dispatch({
      type: 'PROFILE_REQUEST',
      isLoading: true,
      error: null
});
   return axios.get('https://localhost:8088/api/weapons/'+address)
.then(response => {
  dispatch({
        type: 'PROFILE_SUCCESS',
        isLoading: false,
        data: response.data
  });
})
.catch(err => {
  dispatch({
        type: 'PROFILE_FAILED',
        isLoading: false,
        error: err
  });
  console.error("Failure: ", err);
});
}

這里有loadProfile()的化loadProfile()

let profileApiState = {
data: {},
isLoading: false,
error:null
}

const profileApi = (state = profileApiState, action) => {
switch (action.type) {
    case 'PROFILE_REQUEST':
    case 'PROFILE_FAILED':
    return { 
        ...state, 
        isLoading: action.status, 
        error: action.error 
    };
    case 'PROFILE_SUCCESS':
    return {
        ...state, 
        data: action.data, 
        isLoading: action.status,
        error: null 
    };
    default: return {
        ...state
    }

}
}

export default profileApi;

這是我正在執行渲染的組件

class Inventory extends Component {

    componentDidMount() {
        //call action to load weapons
         let address = this.props.checkweb.address;
        this.props.loadProfile(address);
    }

render() {
return (
        <div>
            Some profile data 
            {this.props.profile.data}
        </div>
    );
  }
}
const mapStateToProps = (state) =>{
        return {
            checkweb: state.checkWeb,
            profile: state.profileApi
        };
};

export default connect (mapStateToProps, actionCreators)(Inventory);

TL; DR

我想在調用具有可變（從狀態）的愛可信請求componentDidMount()但變量不加載立刻如此，因為變量為空，我不能打電話的動作。

Answer 1

收到地址道具時，可以使用componentWillReceiveProps發起請求：

componentWillReceiveProps(nextProps) {
    if (!this.props.checkweb && nextProps.checkweb) {
        this.props.loadProfile(nextProps.checkweb.address);
    }
}

編輯：如果您能夠使用異步功能（承諾）獲取address ，則可以執行以下操作：

componentDidMount() {
    getAsyncAddress().then((address) => {
        this.props.loadProfile(address);
    }
}