如何在 React/Redux 中卸載之前以 100% 顯示進度條組件？

Question

我在加載一個大列表時顯示了一個 ProgressBar 組件。 加載列表后，我希望進度條在卸載前顯示 100% 完成。 問題是代碼看起來像這樣：

if(listIsLoading) {
    return (<ProgressBar listIsLoading={listIsLoading} />);
} else {
    return (<List />);
}

當 listIsloading 為 false 時，在 ProgressBar 組件中設置 100% 的值。 但就目前的設置而言，ProgressBar 在顯示 100% 之前正在卸載。 列表請求和設置 listIsLoading 值在單獨的 redux model 中處理，因此我無法從這些 redux 函數中操作組件。

我認為在加載 List 和卸載 ProgressBar 之間需要一些延遲。 但我想在添加超時和其他內容之前，我會先在這里查看是否有更優雅的解決方案。

有任何想法嗎？

Answer 1

你如何設置 listIsLoading 真或假？ 設置為 true 或 false 之前的簡單延遲應該有效，您使用的是 useEffect 嗎？