如何在 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 吗？