[英]I get error when I setup react-alert with my react app Uncaught Error: Objects are not valid as a React child
I got this error:我收到了这个错误:
react-dom.development.js:14748 Uncaught Error: 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.
in Unknown (created by App)
in Provider (created by App)
in div (created by App)
in App
in Provider
at throwOnInvalidObjectType
this is my Alerts component这是我的警报组件
import React, { Component , Fragment} from 'react'
import { withAlert } from "react-alert";
export class Alerts extends Component {
componentDidMount(){
this.props.alert.show("it worked");
}
render() {
return (
<Fragment>
</Fragment>
);
}
}
export default withAlert(Alerts);
and this is my App.js这是我的 App.js
import React ,{ Component, Fragment } from "react";
import { render } from "react-dom";
import {Provider as AlertProvider} from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';
import Header from './components/Header';
import Leads from './components/leads';
import AddLead from './components/AddLead';
import Alerts from './components/Alerts'
import { Provider } from 'react-redux';
import store from './store';
import { connect } from 'react-redux';
const alertOptions = {
timeout:3000,
position:"top center"
}
class App extends Component{
render(){
return(
<div>
<AlertProvider template={AlertTemplate} {...alertOptions}>
<Fragment>
<Header/>
<Alerts/>
<Leads/>
<AddLead/>
</Fragment>
</AlertProvider>
</div>
)
}
}
export default App;
render(<Provider store={store}><App/></Provider>, document.getElementById("app"));
my errors reducer:我的错误减少器:
import { GET_ERRORS } from '../actions/Types';
const initialState = {
msg: {},
status:null
}
export default function (state = initialState, action) {
switch(action.type){
case GET_ERRORS:
return {
msg:action.payload.msg,
status:action.payload.status
};
default:
return state;
}
}
Change the last line of Alert component from export default withAlert(Alerts);
将 Alert 组件的最后一行从export default withAlert(Alerts);
to export default withAlert()(Alerts);
export default withAlert()(Alerts);
according to react-alert docs .根据反应警报文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.