React中redux的异步性问题？

Posted 2021-05-05

我将数据拉入我的一个父组件，然后使用各种过滤语句，这些语句基于选择框中的用户选择。然后我调用一个动作，它只是将基于用户搜索的过滤数据存储到全局状态，以便我的子组件可以访问它们。

我的一个子组件应该呈现结果，但正在发生的结果是所呈现的结果落后于一个动作。我在使用set state时遇到了类似的问题，然后我的解决方案是使用回调，但我不确定如何在这种情况下使用redux处理这个问题。

wordpress.get只是命名为axios配置的导入。

componentDidMount = async () => {
    const response = await wordpress.get(
      "*********************/api/wp/v2/variants?per_page=100"
    );
    this.props.fetchData(response);
    const data = []
    response.data.forEach(ele => {
        data.push(ele)
    })
    this.props.sendFilteredView(data);
};
handleChange = () => {
    this.preBuiltFiltering();
};

我遗漏了预先构建的过滤，因为它过长而且过多，它只是根据用户选择运行过滤器，然后调度this.props.sendFilteredView动作，并将过滤后的数据集作为参数。该操作只返回有效负载。

然后我通过访问全局状态在子组件中呈现过滤器的结果（我也尝试直接通过props传递它，同样的问题）。

答案

这是一个异步函数，你在forEach之后使用数据进行回调。

所以你需要等待每个完成。

尝试在forEach之前使用await。

componentDidMount = async () => {
    const response = await wordpress.get(
      "*********************/api/wp/v2/variants?per_page=100"
);
    this.props.fetchData(response);
    const data = []
    await response.data.forEach(ele => {
        data.push(ele)
    })
    this.props.sendFilteredView(data);
};
handleChange = () => {
    this.preBuiltFiltering();
  };