时间戳

首页 > 解决方案 > React 中 redux 的异步特性有问题吗？

javascript - React 中 redux 的异步特性有问题吗？

问题描述

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

我的一个子组件应该呈现结果，但正在发生的是正在呈现的结果落后于一个动作。我在使用 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 操作。该操作仅返回有效负载。

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

标签： javascriptreactjsreduxreact-redux

解决方案

这是一个异步函数，您在 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();
  };

推荐阅读