React：无法从服务器检索数据（调度）

Question

这是我第一次使用 React，我在尝试获取一些数据时遇到了一些问题。我的问题出在 getChargesByUser() 方法内部，我刚刚写了两个 console.logs，第一个显示但第二个不显示，这意味着我正在进入方法内部但没有进入 return (dispatch) => {...} 奇怪的是，这不是我使用 return (dispatch) => {...} 的唯一方法，例如 loadUserList()，这是唯一我无法访问并且不知道为什么

的方法

const SHOW_PAYMENTS = 'SHOW_PAYMENTS';

const initialState = { 
  open_drawer: false,
  open_search: false,
  list_users: [],
  list_selectusers: [],
  countries: [],
  states: [],
  list_payments: [],
  user: [],
  useremail: [],
  save: [],
  eventtype: '',
  user_redirect: '',
  saveloading: false
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case SHOW_PAYMENTS:
      return Object.assign({}, state, {list_payments: action.payload, eventtype: 'payments'});
    default:
      return state;
  }
}

export function loadUserList(page, perpage) {
  /* I HAVE ACCESS HERE */
  return (dispatch) => { 
    /* I ALSO HAVE ACCESS HERE */
    axios.get(`${config.host}/v1/user?page=${page}&perpage=${perpage}`, {
      headers: {'x-asd-apikey': config.apikey}
    }).then(response => {
      dispatch({type: LOAD_USERLIST, payload: response.data.data});
    }).catch(error => {
      dispatch({type: LOAD_USERLIST_ERROR, payload: error.response.data});
    });
  };
}

export function getChargesByUser(userid) {
  console.log('yes'); //<-- I have access here
  return (dispatch) => {
    console.log('nope'); // I have not accesss here
    axios.get(`http://localhost:7770/v1/payments/${userid}/resume`, {
      headers: {'x-asd-apikey': config.apikey}
    }).then(response => {
      console.log('response: ', response.data.data);
      dispatch({type: SHOW_PAYMENTS, payload: response.data.data.records});
    }).catch(error => {
      console.log('error: ', error.response.data);
      dispatch({type: SHOW_PAYMENTS, payload: { options: error.response.data}});
    });
  };
}

这就是我调用方法的地方

@connect(
  state => ({
    eventtype: state.users.eventtype,
    list_payments: state.users.list_payments,
  }, usersActions)
)

static propTypes = {
  eventtype: PropTypes.any,
  list_payments: PropTypes.any,
  getChargesByUser: PropTypes.func.isRequired,
  params: PropTypes.object
}

componentDidMount() {
  console.log('params: ', this.props.params.userid);
  this.props.getChargesByUser(this.props.params.userid);
}

Answer 1

当内部承诺时，您需要 return 一个 promise-like 对象来继续链。

因此：如果您想在 then/catch 之后进入 return axios.get(...（axios 调用 return 的承诺），则需要 return axios.get(...。

Answer 2

抱歉，我整天都在处理这个问题，却没有注意到问题出在我的代码所在的 @connect()

@connect(
  state => ({
    eventtype: state.users.eventtype,
    list_payments: state.users.list_payments,
  }, usersActions)
)

它应该是这样的：

@connect(
  state => ({
    eventtype: state.users.eventtype,
    list_payments: state.users.list_payments
  }),
  usersActions)

React：无法从服务器检索数据（调度）

React: cannot retrieve data from a server (dispatch)

requestdispatcher

reactjs

redux

react-redux