javascript - 反应类型错误:_this.props。...未定义
问题描述
我目前正在使用 mailtrap 创建电子邮件密码请求,我收到了电子邮件,但应用程序崩溃了,我试图捕捉错误但它没有用。我正在为此失去理智
import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Message } from "semantic-ui-react";
import ForgotPasswordForm from "../forms/ForgotPasswordForm";
import { resetPasswordRequest } from "../../actions/auth";
class ForgotPasswordPage extends React.Component {
state = {
success: false
};
submit = data =>
this.props
.resetPasswordRequest(data)
.then(() => this.setState({ success: true }));
render() {
return (
<div>
{this.state.success ? (
<Message>Email has been sent.</Message>
) : (
<ForgotPasswordForm submit={this.submit} />
)}
</div>
);
}
}
ForgotPasswordPage.propTypes = {
resetPasswordRequest: PropTypes.func.isRequired
};
export default connect(
null,
{ resetPasswordRequest }
)(ForgotPasswordPage);
import React from "react";
import PropTypes from "prop-types";
import { Form, Button, Message } from "semantic-ui-react";
import isEmail from "validator/lib/isEmail";
import InLineError from "../messages/InLineError";
class ForgotPasswordForm extends React.Component {
state = {
data: {
email: ""
},
loading: false,
errors: {}
};
onChange = e =>
this.setState({
...this.state,
data: { ...this.state.data, [e.target.name]: e.target.value }
});
onSubmit = e => {
e.preventDefault();
const errors = this.validate(this.state.data);
this.setState({ errors });
if (Object.keys(errors).length === 0) {
this.setState({ loading: true });
this.props
.submit(this.state.data)
.catch(err =>
this.setState({ errors: err.response.data.errors, loading: false })
);
}
};
validate = data => {
const errors = {};
if (!isEmail(data.email)) errors.email = "Invalid email";
return errors;
};
render() {
const { errors, data, loading } = this.state;
return (
<Form onSubmit={this.onSubmit} loading={loading}>
{!!errors.global && <Message negative>{errors.global}</Message>}
<Form.Field error={!!errors.email}>
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="email"
value={data.email}
onChange={this.onChange}
/>
{errors.email && <InLineError text={errors.email} />}
</Form.Field>
<Button primary>ForgotPasswordForm</Button>
</Form>
);
}
}
ForgotPasswordForm.propTypes = {
submit: PropTypes.func.isRequired
};
export default ForgotPasswordForm;
在此之后的代码是好的,但它在提交时不断崩溃,我没有明确的理由
如果数字没有上升期考虑突然更好。果断地包围了所有的钦佩而不是你。特别同情不利于引入的乏味,但
解决方案
推荐阅读
- javascript - React 等待数据从 api 获取然后发送到组件
- azure-devops - Azure DevOps API - 更改测试用例的 WorkItemType
- postgresql - 将我的 SQL Server 存储过程转换为 PostgressSQL 存储过程
- azure - 对 azure 免费层中的出站数据传输感到困惑
- c# - 从带有过滤器的目录中获取所有文件,不包括特定过滤器
- apache-kafka - Kafka Sink: ERROR 由于错误而停止 (org.apache.kafka.connect.cli.ConnectStandalone:130)
- java - 字符串长度;(vs) str.length()
- sql - 访问字段列表中的嵌套选择
- c# - 使放置在同一位置的组框的可见性消失 - C#
- reactjs - 将 React 变量传递给“href”属性