显示加载栏直到获取

Question

我正在尝试显示加载栏，直到它被获取。所以我选择使用材质UI加载栏。我创建了这个方法来显示加载栏 renderProgressBar。 但是当我试图渲染它时出现了这个错误：

invariant.js:42 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我尝试在控制台中进行调试，但没有任何帮助。 您能告诉我如何使用下面的代码 sn-p 来修复它吗？

https://codesandbox.io/s/redux-async-actions-hntd8

  renderProgressBar = () => {
        console.log(
            'store.getState().fetchingMessage---->',
            store.getState().fetchingMessage
        );

        if (store.getState().fetchingMessage) {
            console.log(
                'inside if rstore.getState().fetchingMessage---->',
                store.getState().fetchingMessage
            );

            return (
                <div

                >
                    <LinearProgress />
                </div>
            );
        }
    };

Answer 1

LinearProgress 未正确导入，这就是您得到 Invariant Violation 的原因。

如此处所述：https://material-ui.com/api/linear-progress/

您想使用以下任一导入：

import LinearProgress from '@material-ui/core/LinearProgress';
// or
import { LinearProgress } from '@material-ui/core';

您似乎有 import {LinearProgress} from '@material-ui/core/LinearProgress'; 没有返回 undefined 因为它没有在核心文件夹下导出名为 LinearProgress 的命名模块。

Answer 2

嘿@zf 我已经重构了你的一些代码框，我发现主要有两个问题：

• 第一个正如我们之前所说的那样，您以错误的方式导入 LinearProgress。
• 我发现的另一个问题是您的 react 和 reactDOM 版本不匹配。

然后我刚刚添加了获取类和样式的调用，然后你就知道了，检查代码框并随时提出问题：

https://codesandbox.io/s/redux-async-actions-i4vqf

记住，当您遇到困难时阅读文档，这是解决您的问题的主要流程。 LinearProgressDocs