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中执行，在这种情况下，在您调用的Class中执行：

  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?

此外，我建议使用本教程，该教程对Java语言的异常行为进行了很多解释：

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')

      }
    })
  }

反应TypeError：未定义onSubmit

2 个答案: