показывать полосу загрузки до выбранной

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

Привет, @zf Я немного реорганизовал немного твоих кодов и ящиков и обнаружил в основном две проблемы:

• Первая, как мы уже говорили, импортирует LinearProgress неправильный путь.
• Другая проблема, которую я обнаружил, заключается в том, что у вас есть непревзойденные версии реаги и реагиДОМ .

Затем я только что добавил вызовы, чтобы получить предложения и стили, и там вы получили его, проверьте коды и поле и не стесняйтесь задавать вопросы:

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

Помните, что читать документы, когда вы застряли, - это основной процесс решения ваших проблем. LinearProgressDocs

Answer 2

LinearProgress не импортируется правильно, поэтому вы получаете Инвариантное Нарушение.

Как указано здесь: 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 в папку core.