javascript - 使用 ComponentDidMount 中的 props 调用 Action

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: []
};

这里的变量“选择”应该可以使用传递的参数，但未定义:

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