在React中Redux具有異步特性的問題？

Question

我將數據提取到我的父組件之一中，然后使用基於用戶從選擇框中進行選擇的各種過濾器語句。 然后，我調用一個操作，該操作僅基於用戶搜索到全局狀態來存儲經過篩選的數據，以便我的子組件可以訪問它們。

我的一個子組件應該呈現結果，但是正在發生的結果是呈現的結果滯后一個動作。 使用set state時遇到了類似的問題，我的解決方案是使用回調，但是我不確定在這種情況下如何使用redux處理該問題。

wordpress.get只是命名為axios config的import。

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傳遞，同樣的問題）。

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();
  };