在ComponentDidMount中使用属性调用操作

Question

我使用在reducer上定义的属性从componentDidMount调用一个操作，但当它到达该操作时，该参数并未定义。

在我的组件中，我使用属性(this.props.selection)将操作称为"fetchAppClasses“：

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

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

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

这是一个reducer返回的状态：

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

在这里的变量"selection“中，传递的参数应该是可用的，但没有定义：

       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));
              })      
          }
        }

Answer 1

尝试在fetchAppClasses函数内部调用axios之前删除return。

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));
      });
  };
}