福米克
我是 formik 的新手,每次我开始学习时都开始使用它,我遇到了这个问题
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
我无法找到错误,因为这是我的代码 //这是 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文件导入到路由文件
import Login from './views/login/index';
我不知道为什么会出现错误,我尝试使用Formik和Formik组件,但没有任何作用,我也尝试使用控制台日志查看登录组件中的 Prop ,但它也没有记录 Prop 意味着没有任何日志。
最佳答案
这是由导入问题引起的一般错误。但是,根据我对 react@16
的测试,它看起来像下面的任何版本 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="592b3c383a2d743d363419686f776d" rel="noreferrer noopener nofollow">[email protected]</a>
当元素作为对象导入时,将显示此特定错误。
此 CodeSandbox 演示了错误:https://codesandbox.io/s/0vrn83o6ww (更改react/react-dom版本来测试您的环境)
如果您使用react@16
,更新react-dom
到版本>=16.4
这应该可以修复错误。
最近版本 formik
与 react-dom
的不兼容版本出现了这个错误:https://github.com/jaredpalmer/formik/issues/907
关于javascript - Formik 元素类型无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50271471/