this 在箭头函数中未定义

Question

我正在创建一个包含带有提交按钮的表单的组件。在表单的 OnSubmit 中，我调用了一个箭头函数。在此函数中，我将对象称为“this”，但收到未定义的错误消息。但是，如果我只是在表单的 OnSubmit 中执行 console.log(this) 而不是调用箭头函数，则定义了 this。任何人都知道如何解决这个问题？我实际上正在学习 react/ethereum 课程，即使讲师的代码在他的视频中有效，但当我使用它时，他的代码不起作用。

import React, {Component} from 'react';
import { Button, Form, Input, Message } from 'semantic-ui-react'

class CampaignNew extends Component{
  state = {
    minimumContribution: "",
    errorMessage: ""
  }

  onSubmit = async (event) => {
    event.preventDefault();
    this.setState({errorMessage: "test error"});
  }

  render(){
    return  (
                <div>
                  <Form onSubmit={this.onSubmit} error={this.state.errorMessage}>
                    <Form.Field>
                      <label>Minimum contribution</label>
                      <Input                        
                        labelPosition="right"
                        value={this.state.minimumContribution}
                        onChange={event => this.setState({minimumContribution: event.target.value})}
                        style={{width: "250px"}} placeholder='0' />
                    </Form.Field>
                    <Button type='submit' primary>Create</Button>
                  </Form>
                </div>
            )
  }
}

export default CampaignNew;

Answer 1

这与这个值在 javaScript 中的定义方式有关。您应该知道“this”值是由运行时调用它的人定义的。

在 Class 中，“this”值与其父级的 this 值相同。在这段代码中，“this”值是 CampaignNew 类对象。

class CampaignNew extends Component{
  onSubmit = async (event) => {
    event.preventDefault();
    this.setState({errorMessage: "test error"});
  }

但“this”值在下面的代码中有所不同。

<Form onSubmit={this.onSubmit}

这是因为 Form 元素调用了 onSubmit，这意味着 onSubmit 中的这个值与 Form 元素的 "this" 的值相同，而 Form 元素没有这个值，所以这就是该值未定义的原因。

Answer 2

您的代码对我来说运行良好，但缺少一些关于您如何创建组件的信息。看来您可能没有使用 Create-React-App。您的问题在于类组件中的方法绑定。

React 文档 (https://reactjs.org/docs/handling-events.html) 指出：

在 JSX 回调中你必须小心 this 的含义。在 JavaScript 中，默认情况下不绑定类方法。如果忘记绑定 this.handleClick 并传递给 onClick，那么在实际调用函数时 this 将是未定义的。

这不是 React 特有的行为；它是 JavaScript 中函数工作方式的一部分。一般情况下，如果引用的方法后面不带()，比如onClick={this.handleClick}，就应该绑定那个方法。

如果调用 bind 让您烦恼，有两种方法可以解决这个问题。如果您使用的是实验性的公共类字段语法，您可以使用类字段来正确绑定回调：

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.  
  // Warning: this is *experimental* syntax.  
  handleClick = () => {    console.log('this is:', this);  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

Create React App 中默认启用此语法。

Form 组件的 error 属性也应该是布尔值，并且您提供的代码中不需要异步字。

Answer 3

我发现了问题。这是我的 NextJS 版本。如果我将其降级到早期版本，一切正常。不知道为什么它会在新版本中中断。

工作版本：“下一个”：“^11.1.3”