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

【问题标题】：Do I need an async function to properly include a working preloader component?我需要一个异步函数来正确包含一个工作的预加载器组件吗？
【发布时间】：2020-06-13 06:39:20
【问题描述】：

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

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

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

我的问题是，这是我需要异步函数来实现的吗？我对正确使用 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 中，我只是在组件返回语句中包含 {props.loading}。

【问题讨论】：

您是否尝试在 setTimeout 注释掉的行中添加延迟只是为了查看加载程序是否出现？有时加载是即时的，加载器只是没有时间显示。
另外，建议对加载状态使用布尔值，而不是null。
使用 setTimeout 就像一个魅力！非常感谢，我会确保在未来使用它！
你介意接受我的回答吗？

标签： reactjs asynchronous state preloader

【解决方案1】：

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

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

但是，如果加载行为发生得足够快，我认为没有必要伪造加载行为。最佳做法可能是在 500 毫秒到 1000 毫秒后开始显示加载程序，或者当普通人类用户开始觉得您的应用程序没有响应时（如果没有更改）。

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

【讨论】：