“检查‘`CookiesProvider`’的呈现方法‘”错误

Question

我试图在我的react应用程序中使用cookie，但无法使模块工作。我正在使用这个页面中的示例：https://www.npmjs.com/package/react-cookie

但它给了我以下错误：

元素类型无效:需要字符串(用于内置组件)或类/函数(用于组合组件)，但是got: object。 检查CookiesProvider的呈现方法。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//cookie
import { CookiesProvider } from 'react-cookie';



const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
    <CookiesProvider>
        <BrowserRouter basename={baseUrl}>
            <App />
        </BrowserRouter>
    </CookiesProvider>,
    rootElement);

registerServiceWorker();

app.js：

//cookies
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';

class App extends Component {
    displayName = App.name

    static propTypes = {
        cookies: instanceOf(Cookies).isRequired
    };

    constructor(props) {
        super(props);

        const { cookies } = props;
        this.state = {
            name: cookies.get('name') || 'Ben'
        };
    }

    render() {
        return (
            <Layout>
                <Route exact path='/' component={Welcome} />
                <Route path='/home' component={Home} />
            </Layout>
        );
    }
}

export default withCookies(App);

Answer 1

你下载错了图书馆。该库的名称是react-cookie，而不是react-cookies。