Получение предупреждения при использовании withCookies ()

Я использую в своем проекте response-cookie. Когда я использую withCookies (), я получаю предупреждение в журнале консоли, подобное этому

Предупреждение: Неудачный тип опоры: недопустимый компонент опоры объекта типа, предоставленного для Route, ожидаемая функция

Как я могу это решить?

Ниже приведен код

import React from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import {  withCookies } from "react-cookie";
import './Login.css';

class NormalLoginForm extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log(values);
                const { cookies } = this.props;
                cookies.set('token', 'dfsfsd54dg2g45fg575f432sd4');
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div style={{ textAlign: 'center' }}>
                <img className="logo-white" src={'https://cdn.medcampus.io/wp-content/uploads/2018/08/01131559/MC_Logo_Black.png'} alt="logo"/>
                <div className="login-container">
                    <br/>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {getFieldDecorator('email', {
                                rules: [{ required: true, message: 'Please input your Email id!' }, {
                                    type: 'email', message: 'The input is not valid E-mail!',
                                }],
                            })(
                                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Email" size={"large"} />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: 'Please input your Password!' }],
                            })(
                                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" size={"large"} placeholder="Password" />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('remember', {
                                valuePropName: 'checked',
                                initialValue: true,
                            })(
                                <Checkbox>Remember me</Checkbox>
                            )}
                            <a className="login-form-forgot" href="">Forgot password</a>
                            <Button type="primary" size={"large"} htmlType="submit" className="login-form-button">Log in</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

const Login = withCookies(Form.create({ name: 'normal_login' })(NormalLoginForm));

export { Login };

person Sudeep Kumar    schedule 26.02.2019    source источник
comment
Предупреждение касается экземпляра Route компонента, а в вашем коде такого компонента нет. Не могли бы вы включить его?   -  person Incepter    schedule 26.02.2019
comment
Это мой код файла App.js. В этот файл я добавил код маршрутизации @MohamedELAYADI   -  person Sudeep Kumar    schedule 26.02.2019
comment
Не могли бы вы показать свой pages.js файл?   -  person Incepter    schedule 26.02.2019
comment
Pages - это каталог. В этом каталоге у нас есть все компоненты страницы с одним файлом index.js. Этот файл index.js состоит из приведенного ниже кода. export * from './login/Login'; export * from './signup/Signup';   -  person Sudeep Kumar    schedule 26.02.2019
comment
Вот и все, я напишу возможный ответ на вашу проблему, обратите внимание, что это не имеет ничего общего с withCookies.   -  person Incepter    schedule 26.02.2019


Ответы (1)


Следуя комментариям, вы по умолчанию экспортируете весь импорт из файлов ваших контейнеров, поэтому в основном вы получите объект, а не функцию (точный экспорт).

Чтобы этого не произошло, есть несколько способов:

  • Импортируйте свой контейнер в App из собственного файла.
  • в index.js из pages вы можете сделать это:
import { Login } from `LoginContainerFile`;
import { Comp1} from `Comp1ContainerFile`;
import { Comp2} from `Comp2ContainerFile`;
export { Login, Comp1, Comp2 };

Удачи и надеюсь, что это решит вашу проблему.

person Incepter    schedule 26.02.2019