福米克
我是formik的新手，每次开始学习时都会开始使用它，我遇到了这个问题
未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。
我无法找到错误，因为这是我的代码 // 这里是 Login.js 文件
import React, { Component } from "react";
import { Row, Col, Button } from "react-bootstrap";
import validator from "validator";
import { withFormik, Form, Field } from 'formik';
import Yup from 'yup';
import { RingLoader } from "react-spinners";
import "./Login.css";
import logo from "../../img/logo.png";
var NotificationSystem = require("react-notification-system");
class Login extends Component {
render() {
let { errors, touched } = this.props;
console.log("Login Component",this.props);
return (
<div className="content">
<Row>
<Col md={4} mdOffset={4} xs={10} xsOffset={1}>
<div style={stylelogobox}>
<img src={logo} style={logoStyle} />
</div>
<Form className="form-horizontal">
<fieldset>
<legend className="text-center">
<h2>Login</h2>
</legend>
<div className="form-group">
<label className="col-lg-2 control-label">Username</label>
<div className="col-lg-10">
<Field
type="text"
className="form-control"
placeholder="username"
name="username"
/>
{errors.username && touched.username && errors.username}
</div>
</div>
<div className="form-group">
<label htmlFor="inputPassword" className="col-lg-2 control-label">
Password
</label>
<div className="col-lg-10">
<Field
type="password"
className="form-control"
placeholder="Password"
name="password"
/>
{errors.password && touched.password && errors.password}
</div>
</div>
<div className="form-group">
<Col lg={10} lgOffset={2}>
<button
// disabled={this.props.user.isLogging}
className="btn btn-primary login-button btn-block LoginButton"
// disabled={this.state.isEnabled}
// onClick={this.handlesOnLogin}
>
<span> Login </span>
</button>
</Col>
</div>
</fieldset>
</Form>
</Col>
</Row>
<Row>
<Col md={4} mdOffset={4} xs={10} xsOffset={1}>
<div className="pull-right">
<Button bsStyle="default" onClick={this.goForgetPassword}>
Password Reset
</Button>
</div>
</Col>
</Row>
<div className="sweet-loading loadingSpinner">
<RingLoader
color={"#5c1a3e"}
//loading={this.state.loading}
loading={this.props.user.isLogging}
/>
</div>
<div>
<NotificationSystem ref="notificationSystem" />
</div>
</div>
);
}
const formikEnhancer = withFormik({
initialValues: { username: "", password: "" },
handleSubmit: (values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}
});
export default formikEnhancer(Login);
我将此文件导入到 index.js 中，并在其中将其连接到 redux 商店。index.js 和 login.js 在同一个文件夹中
这是 Index.js
import { connect } from "react-redux";
import Login from "./Login";
import {
login,
loginRequestLoader,
resetInvaliduser
} from "../../redux/actions/user";
const mapStateToProps = state => {
return {
user: state.user,
loginFlag: state.user.login
};
};
const mapDispatchToProps = dispatch => {
return {
loginRequestLoader: () => dispatch(loginRequestLoader()),
login: (username, password) => dispatch(login(username, password)),
resetInvaliduser: () => dispatch(resetInvaliduser())
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Login);
这是从 index.js 文件导入到 Routes 文件中
import Login from './views/login/index';
我不知道为什么这是我尝试使用Formik和Formik组件但没有任何工作的错误我也尝试使用控制台日志在Login组件中查看道具，但它也没有记录道具意味着没有日志。