reactjs - 当我使用 withCookies() 时收到警告
问题描述
我在我的项目中使用 react-cookie。当我使用 withCookies() 时,我在控制台日志中收到这样的警告
警告:失败的道具类型:提供给路线的类型对象的无效道具组件,预期的功能
我该如何解决这个问题。?
下面是代码
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 };
解决方案
在评论之后,您将默认导出容器文件中的所有导入,因此基本上您将获得一个对象,而不是一个函数(确切的导出)。
为了防止这种情况,有几种方法可以做到:
App
从自己的文件中导入您的容器。- 在
index.js
中pages
,您可以这样做:
import { Login } from `LoginContainerFile`;
import { Comp1} from `Comp1ContainerFile`;
import { Comp2} from `Comp2ContainerFile`;
export { Login, Comp1, Comp2 };
祝你好运,希望它能解决你的问题。
推荐阅读
- nested - How to get a working wikitable in a nested tabber?
- python - 识别多个 JSON 多边形内的地理数据框点
- svg - webpack处理后svg文件中导入样式表的问题
- r - 在 dplyr 管道中取 ntiles 和 bind_rows 之间的差异
- c# - 如何从 Windows 服务在应用程序中启动 Windows 窗体?
- php - 如何在 php 和 sql 中创建聊天对话列表?
- reactjs - Material-ui网格没有放置任何间距
- json - 从 Web 浏览器读取 JSON 值?
- swift - SwiftUI 背景图片全屏
- .net - 创建模板时如何在 Elasticsearch.Net/NEST 中设置 Alias.is_write_index