Javascript 反应+；Next.js+；Firebase:Auth URL在使用Email和password登录后更改为用户名和密码

我正在使用React+Next.js+Firebase.Auth。我有一个电子邮件和密码的表格。在提交时，它调用onSubmit方法并成功地在控制台中显示

“onSubmit”，user

。但是控制台中不显示“之后的

”。此外，url会更改应用于身份验证的电子邮件和密码

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

它还抛出
（TypeError）：无法读取
onAuthStateChanged
内部未定义的属性“setState”

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

import React，{Component}来自“React”
从“../SignUp”导入{SignUpLink}；
从“antd”导入{Button}；
从“react redux”导入{connect}
从“../../firebase”导入{firebase}
常量符号页=（）=>(
签名
);
常量初始状态={
电子邮件：“”，
密码：“”，
错误：null，
用户：空
};
异步函数onSignInButton（）{
console.log（“登录Burton”）
console.log（“登录完成”）
}
常量符号按钮=（）=>(
登录
);
类SignInFormBase扩展组件{
静态异步getInitialProps（{Component，ctx}）{
const pageProps=Component.getInitialProps？等待Component.getInitialProps（ctx）：{}；
返回{pageProps}；
}
建造师（道具）{
超级（道具）
this.state={…初始状态}
}
onSubmit=（事件）=>{
log（“onSubmit”，this.state）
firebase.auth.signiWithEmailandPassword（this.state.email，this.state.password）
.catch（函数（错误）{
//在这里处理错误。
var errorCode=error.code
var errorMessage=error.message
console.log（错误消息）
// ...
});
firebase.auth.onAuthStateChanged（函数（用户）{
如果（用户）{
//
this.setState（{user:user}）
console.log（“User”，this.state.User）
}否则{
//处理错误
}
})
console.log（“之后”）
event.preventDefault（）；
};
onChange=事件=>{
this.setState（{[event.target.name]：event.target.value}）
};
渲染（）{
const{email，password，error}=this.state；
const isInvalid=密码==''| |电子邮件==''
返回(
登录
{error&{error.message}
}
);
}
}
范围
此
上下文不正确，因为您使用关键字函数声明了一个anon函数。执行此操作时，将创建一个新范围。这意味着
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
      }
    })