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 中如何定义此值有关。你应该知道“这个”值是由谁在运行时调用它来定义的。

在Class中，“this”值与其父项的this值相同。在此代码中，“此”值是 CampaignNew class 对象。

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。您的问题与 class 组件中的方法绑定有关。

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

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

If calling bind annoys you, there are two ways you can get around this. If you are using the experimental public class fields syntax, you can use class fields to correctly bind callbacks:

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

This syntax is enabled by default in Create React App.

此外，Form 组件的 error prop 应该是布尔值，您提供的代码中不需要异步字。

Answer 3

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

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

this 在箭头函数中未定义

this undefined in arrow function

forms

error-handling

this

undefined

reactjs