[英]React alert Uncaught Invariant Violation
我在安裝react-alert時遇到了一些問題,它顯示的錯誤就像
react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead.
所以我在cmd中運行命令npm install react-alert react-alert-template-basic react-transition-group
這就是我的App.js的樣子。
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';
import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import Alerts from './layout/Alerts';
import { Provider } from 'react-redux';
import store from '../store';
const alertOptions = {
timeout: 3000,
position: "top center"
};
class App extends Component {
render() {
return (
<Provider store={store}>
<AlertProvider template={AlertTemplate} {...alertOptions}>
<Fragment>
<Header />
<Alerts />
<div className="container">
<Dashboard />
</div>
</Fragment>
</AlertProvider>
</Provider>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
我添加了組件Alers.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);
所以在Alert.js中,我添加了componentDidMount()來測試這是否有效(顯然不是)。 如果我從App.js中刪除<Alerts />
,我沒有任何錯誤,但警報不能以這種方式工作。
您應該像這樣導入您的組件以使用withAlert
HOC:
export default withAlert()(Alerts);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.