反应警报未捕获的不变违反

时间:2019-06-17 22:08:37

标签: javascript reactjs

我在安装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 />,则不会出现任何错误,但警报无法以这种方式工作。

1 个答案:

答案 0 :(得分:0)

您应该像这样导入组件,以便使用withAlert HOC:

export default withAlert()(Alerts);