我是否需要一个异步函数来正确包含一个工作的预加载器组件？

Question

我正在使用 Electron React 应用程序，我很好奇我是否需要异步函数来正确显示预加载器 svg。 svg 存储在状态中，当我通过显示它而不是删除它来测试它时，它工作得很好。但是，当我实际尝试在我的应用程序过程中使用它时，它似乎从未出现过。

Here's what I'd like it to look like（我通过注释掉在处理文件后将状态更改回 null 的位置来实现此目的）

Here's what I get instead（当我将状态从加载器更改回空时会发生什么......看不到加载器！）

我的问题是，这是我需要异步函数来实现的吗？我对正确使用 async await 不是很熟悉，这不是我第一次运行在 React 应用程序中遇到这个问题。我只是想弄清楚为什么加载器在我按预期实现时似乎从未出现过。老实说，我可能只是在这里犯了一个新手错误，所以我想要第二个意见！

在App.js中：

const [loading, setLoading] = useState(null);

const handleLoading = (value) => {
    setLoading(value);
};

...

<Route exact path="/list">
    <List loading={loading} />
</Route>
<Route exact path="/">
    <Start loading={handleLoading} />
</Route>

在Start.js

const handleFiles = (files) => {
            // *set the loading state to the component
            props.loading(
                <div className="base-loader">
                    <div className="preloader-wrapper big active">
                        <div className="spinner-layer spinner-blue-only">
                            <div className="circle-clipper left">
                                <div className="circle"></div>
                            </div>
                            <div className="gap-patch">
                                <div className="circle"></div>
                            </div>
                            <div className="circle-clipper right">
                                <div className="circle"></div>
                            </div>
                        </div>
                    </div>
                </div>
            );
            // counter to list with a Materialize toast when finished if > 0
            sendFiles(files);
            if (incompatibleFiles > 0) {
                M.toast({
                    html: `${incompatibleFiles} file(s) could not be minified due to incompatible file type.`,
                });
            }
            // reset for next drag and drop
            incompatibleFiles = 0;

            // *THIS is the line I comment out for it to start working (although it just goes infinitely)
            props.loading(null);
        };

最后在 List.js 中，我只是在组件 return 语句中包含 {props.loading}。

Answer 1

这可能是因为加载是即时的，加载程序出现的时间不够长，无法引起注意。如果您尝试在将 loading 状态设置为 false 之前设置超时，加载程序应该很明显：

setTimeout(() => {
  setLoading(false);
}, 500);

但是，我认为如果加载速度足够快，则没有必要伪造加载行为。最好的做法可能是在 500 毫秒到 1000 毫秒之后开始显示加载器，或者当普通用户开始觉得如果没有任何变化你的应用程序没有响应时。

let timeout = setTimeout(() => {
  if (!dataHasLoaded) {
    setLoading(true);
  } else {
    clearTimeout(timeout);
  }
}, 500);

我是否需要一个异步函数来正确包含一个工作的预加载器组件？

Do I need an async function to properly include a working preloader component?

state

asynchronous

preloader

reactjs