当我使用我的反应应用程序设置反应警报时出现错误未捕获错误：对象作为 React 子项无效

Question

我收到了这个错误：

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 

这是我的警报组件

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);

这是我的 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"));

我的错误减少器：

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;
    }
}

Answer 1

将Alert组件的最后一行从export default withAlert(Alerts);改为 export default withAlert()(Alerts); 根据react-alert docs.