- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
福米克
我是 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
的测试来看,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
关于javascript - Formik 元素类型无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50271471/
我有一个接受以下参数的函数: int setvalue(void (*)(void *)); 为了满足参数:void (*)(void *),我创建了这样一个函数: static void *
我有以下代码: typedef void VOID; int f(void); int g(VOID); 在 C 中编译得很好(在 Fedora 10 上使用 gcc 4.3.2)。与 C++ 编译的
这个问题已经有答案了: Is f(void) deprecated in modern C and C++? [duplicate] (6 个回答) 已关闭 7 年前。 B.A.T.M.A.N./A.
我在 ASP.NET Core 3.1 项目上有以下 Identity Server 4 配置: services .AddIdentityServer(y => { y.Events.R
我们有一个 O365 租户,一切都是开箱即用的。租户放置在德国云中,而不是全局 (office.de) 中。我们还开发了一个 Office 插件,使用 OAuth 2.0 授权访问共享点。首先,我们向
我有一个如下所示的路由 routes.MapRoute( name: "Default", url: "{controller}/{action}/{i
我正在尝试使用 OAuth2.0 访问 google 文档。我已经从 Google API 控制台获取了客户端 ID 和 key 。但是当我运行这段代码时,我收到了异常。如果我遗漏了什么,有人可以建议
此代码有效: let mut b: Vec = Vec::with_capacity(a.len()); for val in a.iter() { b.push(val); } 此代码不起作
使用 client_credintials 授权类型请求 EWS oauth2 v2.0 的访问 token 时出现错误。 https://login.microsoftonline.com/tena
我通过 Java 应用程序使用 Google 电子表格时遇到了问题。我创建了应用程序,该应用程序运行了 1 年多,没有任何问题,我什至在 Create Spreadsheet using Google
如何创建 匹配所有无效 Base64 字符的正则表达式?我在堆栈上找到了 [^a-zA-Z0-9+/=\n\r].*$ 但是当我尝试时我得到了带有 - 符号的结果字符串.我根本不知道正则表达式,任何人
我从 Gitlab CI/CD Pipelines 获得错误信息:yaml invalid。问题是由 .gitlab-ci.yml 脚本的第五行引起的: - 'ssh deployer@gita
我有 3 个数据源,设置如下: @Configuration @Component public class DataSourceConfig { @Bean("foo") @Conf
你好,我想用bulkCreate ex 插入数据: [ { "typeId": 5, "devEui": "0094E796CBFCFEF9", "application_name": "Pressu
UIApplicationExitsOnSuspend 不会强制我的应用程序退出。我已经清理过目标、删除了应用程序、重建并重新安装了很多次。 我确实需要退出我的应用程序。 最佳答案 您是否链接了 SD
在 iPhone 配置门户上,显示我的 iPhone 团队配置配置文件无效。有一个“由 Xcode 管理”文本。 “续订”按钮被禁用。 我该如何解决这个问题?谢谢 最佳答案 使用 Xcode 3.2.
好的,所以今天我用我们的“实时”数据库中的新信息更新了我的数据库……从那时起,我的一个表格就出现了问题。如果您需要任何代码,请告诉我,我将对其进行编辑并发布所需的代码... 我有一个报告表格,其中有一
我有一个结构体,其中有一个元素表示为 void (*func)(); 我知道 void 指针通常用于函数指针,但我似乎无法定义该函数。我不断收到取消引用指向不完整类型的指针。我用谷歌搜索了一下但没有结
我正在尝试使用 Coldfusion 9 从 ning 网络获取凭证,所以首先这是测试 api 的 curl 语法: curl -k https://external.ningapis.com/xn/
这个问题已经有答案了: Does C have references? (2 个回答) 已关闭 4 年前。 我正在学习 C 语言引用,这是我的代码: #include int main(void)
我是一名优秀的程序员,十分优秀!