Когда я помещаю <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);
Данную ошибку увидел в консоли: Ошибка в консоли
Пожалуйста, укажите Минимальный воспроизводимый пример проблемы, с которой вы столкнулись, чтобы мы могли вам помочь.
когда возникает ошибка?
@ЮниусЛ. Теперь, я думаю, вы можете понять, что именно происходит. Я вставил фрагменты кода выше.
разместите свой компонент Alerts
@kkesley Пожалуйста, посмотрите. Я отредактировал.
из документации npmjs.com/package/реагировать-оповещение, используйте его так: withAlert()(Alerts)
Большое спасибо @kkesley. Я признаю свою глупую ошибку. Такая поддержка заставляет меня продолжать свое путешествие по кодированию.
обычно ошибка,
Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, render})
бросает, когда вы этого не делаете,
- render multiple nodes inside one single parent node(which is not in this case).
- import files properly
если второе условие также выполняется, возможно, следует изучить документы компонента, который вы используете.
Попробуйте изменить свой код на Alert.js
От:
export default withAlert(Alerts);К:
export default withAlert()(Alerts);
Пожалуйста, внимательно проверьте документацию. В вашем коде есть
export default withAlert(Alerts);
Но в документации для использования с HOC вы должны написать
export default withAlert()(Alerts)
Пожалуйста, опубликуйте свой код