发送密码重置电子邮件失败：第一个参数"email"必须是有效的字符串

Question

我正在用firebase auth重置密码，但我收到了错误。以下是我将Reactjs与Redux和ReduxForm一起使用的代码。请检查一下，给我你的解决方案，非常感谢。

[// Libs
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { reduxForm, SubmissionError, Form } from "redux-form";
import { Row, Alert, Col, Divider } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
// Image
// Components
import Footer from "@src/components/layout/footer";
import Input from "@components/input";
import Button from "@src/components/button";
import LoginHeader from "./components/form/header";
// Utils
import { validate } from "@src/helpers";
import {
LOGIN_REQUEST,
LOGIN_FAILURE,
FORGET_PASSWORD_SUBMIT_RULES,
} from "@src/constants/authentication";
import { login } from "@src/actions/authentication";
import styled from "styled-components";
import { Link } from "react-router-dom";
import Title from "@src/components/title";
import { forgetPassword } from "@src/services/authentication";
import { auth } from "@src/services/firebase";
const WrapperContainer = styled.div`
height: 100vh;
background-size: 100%;
background-color: #fff;
background-repeat: repeat;
background-position: center;
.login-content-group {
margin-top: 10px;
margin-bottom: 20px;
small.display-block {
font-size: 70% !important;
}
}
`;
class ForgetPassword extends Component {
onSubmit = async (email) => {
try {
await auth.sendPasswordResetEmail(email);
alert("Password reset link sent!");
} catch (err) {
console.error(err);
alert(err.message);
}
};
render() {
const { handleSubmit, errorLogin, loading } = this.props;
return (
<WrapperContainer>
<Row
type="flex"
align="middle"
justify="center"
style={{ height: "93vh" }}
>
<Col xxl={2} xl={3} md={4} sm={8} xs={10}>
<div className="p-3 rounded box-shadow">
<Form onSubmit={handleSubmit(this.onSubmit)}>
<LoginHeader />
{errorLogin && (
<Alert
message={errorLogin.message}
type="error"
className="mb-3"
/>
)}
<Input
name="email"
placeholder="Email"
prefix={<UserOutlined />}
autoFocus
/>
<Button loading={loading} type="submit" block>
Submit
</Button>
<Divider />
<Link to="../login">Log In</Link>
</Form>
</div>
</Col>
</Row>
<Footer />
</WrapperContainer>
);
}
}
ForgetPassword.propTypes = {
handleSubmit: PropTypes.func,
errorLogin: PropTypes.object,
loading: PropTypes.bool,
};
const mapStateToProps = (state) => {
return {
errorLogin: state.error[LOGIN_FAILURE],
loading: state.request[LOGIN_REQUEST],
};
};
const forgetPasswordReduxForm = reduxForm({
form: "forgetPasswordForm",
})(ForgetPassword);
export default connect(mapStateToProps)(forgetPasswordReduxForm);][1]

当我提交它时，我收到了一个错误，消息如下：

=>sendPasswordResetEmail失败：第一个参数"；电子邮件"；必须是有效的字符串。

Answer 1

表单的onSubmit不会自动传递该表单中已更改字段的值。它可能会得到一个事件，但即使是该事件也只指向表单本身，而不是email字段。

解决方案是将email字段的值存储在状态中，如Forms:上的ReactJS文档所示

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value}); // 👈 set the value of the field to the state
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value); // 👈 use the value from the state
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}