sendPasswordResetEmail 失败：第一个参数“email”必须是有效字符串

Question

我正在使用 firebase auth 重置密码，但出现错误。下面是我将 Reactjs 与 Redux 和 Redux-Form 一起使用的代码。请检查它并给我您的解决方案，非常感谢。

[// 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 失败：第一个参数“email”必须是有效字符串。

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>
    );
  }
}