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.

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

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我重构了一些您的codeandbox，主要发现了两个问题：

第一个就像我们之前所说的那样，您以错误的方式导入 LinearProgress 。
香港专业教育学院发现的另一个问题是您使用的 react 和 reactDOM 版本不匹配。

然后，我刚刚添加了电话来获取分类和样式，然后就可以了，检查codesandbox并随时提出问题：

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

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

显示加载栏直到提取

2 个答案: