Я получаю сообщение об ошибке, когда я настраиваю реагирующее оповещение с моим приложением реагирования. Неопределенная ошибка: объекты недопустимы как дочерний элемент React. - PullRequest
Новая
       21

Я получаю сообщение об ошибке, когда я настраиваю реагирующее оповещение с моим приложением реагирования. Неопределенная ошибка: объекты недопустимы как дочерний элемент React.

0 голосов
/ 24 апреля 2020

Я получил эту ошибку: 

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

и это мое приложение. 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;
    }
}
...