Тип элемента формик является недействительным
Formik
Я новичок в formik и начинаю использовать его каждый раз, когда я начинаю учиться, у меня есть эта проблема
Ошибка Uncaught: недопустимый тип элемента: ожидаемая строка (для встроенные компоненты) или класс / функция (для составных компонентов) но попал: объект.
Я не могу найти ошибку, потому что это мой код // вот логин.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);
Я импортирую этот файл в индекс.js, где я подключаю это к магазину redux. индекс.js и авторизоваться.js находятся в той же папке
Вот индекс.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);
Вот импорт из индекса.файл js в файл маршрутов
import Login from './views/login/index';
Я не знаю, почему это получает ошибку у меня есть пытается с Formik, а также Formik компонент, но ничего не работает я также пытается увидеть реквизит в Login компонент, используя журнал консоли, но это также не регистрирует реквизит означает, что ничего не журнал.
1 ответ:
Это общая ошибка, вызванная проблемами с импортом. Однако из моих тестов с
react@16
, похоже, что любая версия нижеreact-dom@16.4
покажет эту конкретную ошибку, когда элемент импортируется как объект.Этот CodeSandbox демонстрирует ошибку: https://codesandbox.io/s/0vrn83o6ww (Изменить реагировать/реагировать-DOM версии для тестирования среды)
Если вы используете
react@16
, обновитеreact-dom
до версии>=16.4
, и это должно исправить ошибку.Последние версии
formik
с несовместимыми версиямиreact-dom
сделали эту ошибку: https://github.com/jaredpalmer/formik/issues/907