javascript - 使用 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); 
    }

上面的代码可以工作并且加载我的数据，但正如我提到的，我不知道这样做是否可以并且不会造成 future 的问题？当然，我会做一些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() 的 reducer

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() 中使用变量(来自状态)调用 axios 请求，但该变量不会立即加载，因此我无法调用该操作，因为该变量是空。

Answer 1

当您收到地址属性时，您可以使用 componentWillReceiveProps 启动请求:

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

编辑:如果您能够使用异步函数( promise )获取地址，您可以执行以下操作:

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