Formik
我是formik的新手,每次开始学习时都会开始使用它我遇到了这个问题
未捕获错误:元素类型无效:需要一个字符串(for 内置组件)或类/函数(用于复合组件) 但得到了:对象。
我无法找到错误,因为这是我的代码 //这里是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 store。 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';
我不知道为什么这会得到错误我已尝试withFormik和Formik组件但没有任何工作我也尝试使用控制台日志在登录组件中看到道具但它也没有记录道具意味着什么都不是日志。
答案 0 :(得分:1)
这是由导入问题引起的一般错误。但是,根据我在react@16
上进行的测试,看来react-dom@16.4
以下的任何版本都会在元素作为对象导入的情况下显示此特定错误。
此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
答案 1 :(得分:0)
正如@brettinternet所说,它是通用的和通用的。可能是在使用export default formikEnhancer(Login)
时,您需要像非默认类一样将其导入:
import {Login} from './Login';
对于其他搜索对象,当您完全忘记定义组件的默认导出时,也会发生这种情况。