反应类型错误：未定义 onSubmit

Question

单击登录页面中的提交按钮后出现未定义错误。这是 Login.js 文件：

import React, {Component} from 'react'
import { login } from './StudentFunctions'


class Login extends Component {
  constructor() {
    super()
    this.state = {
      email: '',
      password: '',
      errors: {}

    }

    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }

  onSubmit(e) {
    e.preventDefault();

    const student = {
      email: this.state.email,
      password: this.state.password
    }

    login(student).then(res => {
      if (!res.error) {
        this.props.history.push('/profile')

      }
    })
  }
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className = "col-md-6 mt-5 mx-auto">
            <form noValidate onSubmit={this.onSubmit}>
              <h1 className="h3 mb-3 front-weight-normal">Please sign in </h1>
              <div className="form-group">
                <label htmlFor="email">Email Address</label>
                <input type="email"
                  className="form-control"
                  name="email"
                  placeholder="Enter email"
                  value={this.state.email}
                  onChange={this.onChange}
                />
                </div>
                <div className="form-group">
                  <label htmlFor="password">Password</label>
                  <input type="password"
                    className="form-control"
                    name="password"
                    placeholder="Enter Password"
                    value={this.state.password}
                    onChange={this.onChange}
                  />
                </div>
                <button type="submit"
                className="btn btn-lg btn-primary btn-block">
                  Sign in
                </button>
              </form>
            </div>
          </div>
        </div>

    )
  }
}

export default Login

而从StudentFunctinos.js导入的函数是

export const login = student => {
  return axios
  .post('/TPMS/api/v1.0/student/login', {
    email: student.email,
    password: student.password

  })
  .then(res => {
    localStorage.setItem('usertoken', res.data)
    console.log(res)
    return res.data
  })
  .catch(err => {
    console.log(err)
  })
}

错误是在 Login.js 文件中未定义 e，这会引发 catch 错误。是不是因为在按钮 html 中没有声明单击时会发生什么： i.e onClick(e) => {this.onSubmit} 或类似的东西？

Answer 1

问题是，您应用了普通的类方法，它以不同的方式处理this。它会将this 与您调用它的上下文一起考虑，因此在您的情况下，您在事件绑定（onSubmit）中调用它，因此它不会在类中考虑自己，它将返回未定义。我的解决方案是使用箭头函数，它以稳定的方式使用它，并且始终在lexical scope 中执行，在这种情况下，在您调用的类中：

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

  onSubmit = (e) => {
    e.preventDefault();

    const student = {
      email: this.state.email,
      password: this.state.password
    }

    login(student).then(res => {
      if (!res.error) {
        this.props.history.push('/profile')

      }
    })
  }

您可以在这个问题中找到更多解释：Difference between class object Method declaration React?

另外，我推荐这个教程，它解释了很多关于 Javascript 的异常行为：

Javascript the weird parts

Answer 2

onSubmit = (e) => {
    e.preventDefault();
    const { email, password } = this.state;
    const student = {email, password}

    login(student).then(res => {
      if (!res.error) {
        this.props.history.push('/profile')

      }
    })
  }