javascript - React+Next.js+Firebase :Auth URL changes to username and password after signInWithEmailAndPassword

Question

我正在使用 React + Next.js + Firebase.Auth。我有一份电子邮件和密码表格。提交时，它调用 onSubmit 方法并成功在控制台中显示 "onSubmit",user 。但是“After”没有显示在控制台中。此外，URL 会更改为用于身份验证的电子邮件和密码。

ex)http://localhost:3000/signin?email=aaa@gmail.com&password=abc123

它还会抛出(TypeError): Cannot read property 'setState' of undefined inside onAuthStateChanged。

import React, { Component } from 'react'
import { SignUpLink } from '../SignUp';
import { Button } from 'antd';
import { connect } from 'react-redux'
import { firebase } from '../../Firebase'

const SignInPage = () => (
  <div>
    <h1>SignIn</h1>
    <SignInForm />
    <SignUpLink />
  </div>
);

const INITIAL_STATE = {
  email: '',
  password: '',
  error: null,
  user: null
};

async function onSignInButton () {
  console.log("Sign In Butrton")
  console.log("Sign In Done")
}

const SignInButton = () => (
  <Button type="primary" onClick={onSignInButton}>
    Sign In
  </Button>
);


class SignInFormBase extends Component {
  static async getInitialProps ({ Component, ctx }) {

    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

    return { pageProps };
  }

  constructor(props) {
    super(props)
    this.state = { ...INITIAL_STATE }
  }

  onSubmit = (event) => {
    console.log("onSubmit", this.state)
    firebase.auth.signInWithEmailAndPassword(this.state.email, this.state.password)
      .catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code
        var errorMessage = error.message
        console.log(errorMessage)
        // ...
      });
    firebase.auth.onAuthStateChanged(function (user) {
      if (user) {
        //
        this.setState({ user: user })
        console.log("User", this.state.user)
      } else {
        // Handle error
      }
    })
    console.log("After")
    event.preventDefault();
  };

  onChange = event => {
    this.setState({ [event.target.name]: event.target.value })
  };

  render () {
    const { email, password, error } = this.state;

    const isInvalid = password === '' || email === ''

    return (
      <form onSubmit={this.onSubmit}>
        <input
          name="email"
          value={email}
          onChange={this.onChange}
          type="text"
          placeholder="Email Address"
        />
        <input
          name="password"
          value={password}
          onChange={this.onChange}
          type="password"
          placeholder="Password"
        />
        <button disabled={isInvalid} type="submit">
          Sign In
        </button>
        {error && <p>{error.message}</p>}
      </form>
    );
  }
}

Answer 1

范围

this 不在正确的上下文中，因为您使用关键字 function 声明了一个匿名函数。当您执行此操作时，您将创建一个新范围。这意味着 this 关键字表示“此函数”而不是“此 react 类”。

要避免这种情况，请使用箭头函数 () => {}

这些函数传递this。

更改此

firebase.auth.onAuthStateChanged(function (user) {
      if (user) {
        //
        this.setState({ user: user })
        console.log("User", this.state.user)
      } else {
        // Handle error
      }
    })

到此

firebase.auth.onAuthStateChanged((user) => {
      if (user) {
        //
        this.setState({ user: user })
        console.log("User", this.state.user)
      } else {
        // Handle error
      }
    })