Formik 元素类型无效

Question

福米克

我是 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 组件但没有任何效果我还尝试使用控制台日志在登录组件中查看道具但它也没有记录道具意味着什么都没有日志。

Answer 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

Answer 2

正如@brettinternet 所说，它很通用，很常见。可能是在使用 export default formikEnhancer(Login) 时，您需要像非默认 class:

一样导入它

import {Login} from './Login';

对于其他人搜索，当您完全忘记定义组件的默认导出时也会发生这种情况。

Answer 3

我遇到了同样的错误，问题出在 Formik 中的一个特定组件，当时它只是一个空的 jsx 文件。我通过正确修复组件来解决。 Formik 只是警告“朋友，Formik 标签内有问题”。

Formik 元素类型无效

Formik Element type is invalid

javascript

reactjs

react-redux

formik