Неопределенное нарушение инварианта: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {$$ typeof, render})

Question

Обработка ошибок и оповещений в React

Когда я помещаю <Alert /> в основной компонент приложения чуть ниже тега <Header />, как только компонент монтируется, он выдает эту ошибку.

Хотя я удаляю <Alert /> из основного компонента приложения, он работает нормально. Вот как браузер правильно рендерится до того, как я ввел <Alert /> в основной компонент приложения, нажмите здесь .

Вот фрагмент кода, который работает ранее:

class App extends Component {
render() {
    return (
        <Provider store={store}>
            <AlertProvider template={AlertTemplate} {...alertOptions}>
                <Fragment>
                    <Header />
                    <div className="container">
                        <Dashboard />
                    </div>
                </Fragment>
            </AlertProvider>
        </Provider>
    )
}

}

Я ожидаю получить правильные фрагменты предупреждающих сообщений в браузере. Однако после того, как я попытался использовать сторонний пакет с именем react-alert из этого репозитория Github, ничего не отображается в браузере.

Ниже приведен фрагмент кода, который завершился с ошибкой в ​​консоли.

class App extends Component {
render() {
    return (
        <Provider store={store}>
            <AlertProvider template={AlertTemplate} {...alertOptions}>
                <Fragment>
                    <Header />
                    <Alerts />
                    <div className="container">
                        <Dashboard />
                    </div>
                </Fragment>
            </AlertProvider>
        </Provider>
    )
}

Вот мой компонент Alerts.js:

import React, { Component, Fragment } from 'react';
import { withAlert } from 'react-alert';
export class Alerts extends Component {
    componentDidMount() {
        this.props.alert.show('It Works');
    }
    render() {
        return <Fragment />;
    }
}
export default withAlert(Alerts);

Данная ошибка обнаружена в консоли: Ошибка в консоли

Answer 1

Попробуйте изменить код на Alert.js

С:

экспорт по умолчанию с предупреждением (оповещения);

Кому:

экспорт по умолчанию с помощьюAlert () (Alerts);

Answer 2

Пожалуйста, проверьте документацию должным образом.В вашем коде есть

export default withAlert(Alerts);

Но в документации, чтобы использовать с HOC, вы должны написать

export default withAlert()(Alerts)

Answer 3

обычно ошибка,

Неопределенное нарушение инварианта: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {$$ typeof, render})

бросает, когда нет,

1. рендерит несколько узлов внутри одного родительского узла (чего нет в этом случае).
2. правильно импортирует файлы

если второе условие также выполнено, возможно, следует изучить документы компонента, который вы используете ..