Question

使用React和Redux，我需要等待我的所有操作都得到满足才能更新组件状态。阅读Axios docs我发现axios.all收集我的所有动作并等待所有这些动作得到解决（基本上我是n次调用API来获取n个项目的信息）。问题是axios.all的.then函数中的console.log根本不返回任何内容，但是正确调度了操作。

if (this.props.evaluation && this.props.evaluation.topics) {
  var promises = []

  var array = this.props.evaluation.topics;
  var selectedArray = []
  for (var i = 0; i < array.length; i++) {
    promises.push(this.props.fetchTopic(array[i]))
  }

  axios.all(promises).then(function(results) {
    results.forEach(function(response) {
      console.log('///////////////////////');
      console.log(response.value);
      console.log('///////////////////////');
    })
  });
}

编辑：这是我的fetchTopic代码

在我的组件中：

const mapDispatchToProps = (dispatch) => ({
  fetchTopic: (id) => dispatch(fetchTopic(id)),
})

在我的actions.js

中

export const fetchTopic = (id) => ({
  type: "FETCH_TOPIC",
  payload: axios.get(process.env.SERVICE_URL + '/topic/' + id, { headers: { 'Authorization': 'JWT ' + sessionStorage.jwt }})
})

Answer 1

更改此

export const fetchTopic = (id) => ({
  type: "FETCH_TOPIC",
  payload: axios.get(process.env.SERVICE_URL + '/topic/' + id, { headers: { 'Authorization': 'JWT ' + sessionStorage.jwt }})
})

到这个

   export const fetchTopic = (id, cb) => {
     axios.get(process.env.SERVICE_URL + '/topic/' + id, { headers: { 'Authorization': 'JWT ' + sessionStorage.jwt }})
     .then((response) => {
       if (cb) cb({ type: "FETCH_TOPIC", payload:response })
     });
    }

然后运行

for (var i = 0; i < array.length; i++) {
  this.props.fetchTopic(array[i], (result) => {
    // get the result here
  })
}

未调用componentWillReceiveProps中的Axios.all

1 个答案: