javascript - 在触发下一行之前，使用 axios 进行 react 等待数据获取不起作用

Question

这里是我的组件 OneRoadmap 的简要概述:在异步 componentDidMount 中，我首先调用“await this.props.getRoadmaps”，这是我的 Redux 中的一个操作，此操作将向我的 api 发送一个 get 请求，该请求将检索数据库中的项目，然后，从检索到的这些项目中，我们向Reducer发送一个调度，调用GET_ROADMAPS，这就像

export const getRoadmaps = () => dispatch => {
dispatch(setRoadmapsLoading());
axios
.get("/api/roadmaps")
.then(res => dispatch({ type: GET_ROADMAPS, payload: res.data }));
};

我的组件看起来像:

async componentDidMount() {
await this.props.getRoadmaps();
var location1 = this.props.location.pathname;
var n = location1.slice(9);

var current_roadmaps = this.props.roadmap.roadmaps;

this.displayRoadmap = current_roadmaps.filter(
  eachRoadmap => eachRoadmap._id == n
);
// now we have a roadmap

this.setState({
  treeData: this.displayRoadmap[0].roadmap[0],
  loading: false
});
}

GET_ROADMAPS 将更新我的 Redux 状态。

问题似乎是:await this.props.getRoadmaps() 只会等到 getRoadmaps() 将调度发送到 GET_ROADMAPS，这意味着它不会等到 GET_ROADMAPS 更新 redux 状态 ，这意味着几行之后，当我执行 this.props.roadmap.roadmaps 时，它将是未定义的，因为 this.props.roadmap.roadmaps 可能在 GET_ROADMAPS 完成更新我的 redux 状态之前被调用。

如果有任何方法可以解决问题，请指导我:)，如果问题不是我想的那样，请纠正我。

附注我引用了https://www.robinwieruch.de/react-fetching-data ，那里的信息通常会起作用，但似乎由于我有一个额外的调度到我的 redux 存储，调度会在我调用 this.props.roadmap.roadmaps 后更新存储，这意味着我未定义并且不能在我的渲染中使用该变量

Answer 1

看来您不会返回 Action 创建器。创建 block 时必须显式返回(使用大括号)。

返回您的 axios 调用，它应该可以正常工作。