Question

我正在将数据提取到我的父组件之一中，然后使用基于用户从选择框中进行选择的各种过滤器语句。然后，我要调用一个操作，该操作只是根据用户搜索到全局状态来存储经过筛选的数据，以便我的子组件可以访问它们。

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

wordpress.get仅被命名为axios config的导入。

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操作，并将筛选出的数据集作为参数。该操作仅返回有效载荷。

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

Answer 1

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

在React中Redux具有异步特性的问题？

1 个答案: