使用ComponentDidMount中的props调用Action [英] Call Action with props in ComponentDidMount

问题描述

我正在使用reducer上定义的属性调用componentDidMount中的操作，但是当它到达操作时，参数未定义。

I'm calling an action from a componentDidMount with a property defined on the reducer, but when it reach the action the parameter is not defined.

在我的组件我用属性（this.props.selection）调用操作fetchAppClasses：

Here in my component I call the action "fetchAppClasses" with the property (this.props.selection):

 componentDidMount() {
    this.props.actions.fetchAppClasses(this.props.selection);    
  }    

function mapStateToProps(state, ownProps) {
  return {
    selection: state.SDWanSelectionReducer
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(sDWanActions, dispatch)
  };
}

这是减速器返回的状态：

This is the state that is returned by a reducer:

const selection = {
  timespan: "-3660",
  customTimespan: false,
  pathIds: [''],
  source: undefined,
  direction: 0,
  appClassIds: []
};

这里的变量selection应该是参数传递但未定义：

Here in the variable "selection" should be avaivable the parameters passed but is undefined:

       export function fetchAppClasses(selection) {
          return function (dispatch) {
            var axcfg = { headers: { 'X-Auth-Token': window[config.storageType].token } };
            return axios.get(config.apiUrl + '/sdwan/appClasses', axcfg)
              .then(function (response) {
                console.log('SDWanActions.fetchAppClasses response:', response);
                dispatch(fetchAppClassesSuccess(response.data));
              })      
          }
        }

推荐答案

尝试在 return > fetchAppClasses function。

Try removing the return before the axios call inside your fetchAppClasses function.

export function fetchAppClasses(selection) {
  return function(dispatch) {
    var axcfg = {
      headers: { 'X-Auth-Token': window[config.storageType].token },
    };

    // remove the return axios.get...
    axios.get(config.apiUrl + '/sdwan/appClasses', axcfg)
      .then(function(response) {
        console.log(selection); // this should work now...
        console.log('SDWanActions.fetchAppClasses response:', response);
        dispatch(fetchAppClassesSuccess(response.data));
      });
  };
}

这篇关于使用ComponentDidMount中的props调用Action的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！