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

Обработка ошибок и оповещения в 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);

Данную ошибку увидел в консоли: Ошибка в консоли

Пожалуйста, опубликуйте свой код

Junius L. 30.05.2019 10:20

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

mgarcia 30.05.2019 10:20

когда возникает ошибка?

Junius L. 30.05.2019 10:31

@ЮниусЛ. Теперь, я думаю, вы можете понять, что именно происходит. Я вставил фрагменты кода выше.

pratimagautam.np 31.05.2019 03:19

разместите свой компонент Alerts

kkesley 31.05.2019 03:23

@kkesley Пожалуйста, посмотрите. Я отредактировал.

pratimagautam.np 31.05.2019 03:32

из документации npmjs.com/package/реагировать-оповещение, используйте его так: withAlert()(Alerts)

kkesley 31.05.2019 03:37

Большое спасибо @kkesley. Я признаю свою глупую ошибку. Такая поддержка заставляет меня продолжать свое путешествие по кодированию.

pratimagautam.np 31.05.2019 06:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
8
502
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, render})

бросает, когда вы этого не делаете,

  1. render multiple nodes inside one single parent node(which is not in this case).
  2. import files properly

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

Ответ принят как подходящий

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

От:

export default withAlert(Alerts);
К:
export default withAlert()(Alerts);

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

export default withAlert(Alerts);

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

export default withAlert()(Alerts)

Другие вопросы по теме