React类中箭头函数定义时提示未定义编译错误求助

Hey there, let's work through this frustrating issue you're hitting—where arrow functions defined in your class component are throwing "undefined" errors during compilation, even though you've clearly defined them on the line the error mentions. Here are the most common fixes to try:

1. Verify Your Arrow Function Placement #

First, double-check that your arrow functions are defined as class instance properties (directly in the class body, not inside another method like render). This is the standard way to bind this automatically in class components:

class MyComponent extends React.Component {
  // ✅ Correct: Arrow function as class instance property
  myArrowFunc = () => {
    // Your logic here
  };

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

If you accidentally defined the arrow function inside another method (like render), it won't be accessible as a class property, but your error suggests this isn't the case—still worth a quick check!

2. Check for Hidden Syntax Errors Before Line 60 #

Compilers often misreport error locations when there's a syntax mistake earlier in the code. For example, a missing closing }, comma, or parenthesis in the lines above your arrow function can break parsing, making the compiler think your arrow function is undefined.

Scan the code immediately before line 60:

• Did you forget to close a method's curly braces?
• Did you miss a comma between class properties/methods?
• Are there any unclosed JSX tags in a previous render block?

Fixing these hidden errors will often resolve the misleading "undefined" message.

3. Update Your React-Scripts Version #

Older versions of react-scripts (pre-2.0.0) didn't support class properties syntax (like arrow functions as instance properties) by default. If your package.json shows a react-scripts version below 2.0.0, upgrade to the latest stable version:

# Using npm
npm install react-scripts@latest

# Using yarn
yarn add react-scripts@latest

After upgrading, restart your development server to apply the changes.

4. Reset Your Dependencies #

Corrupted node modules or lock files can sometimes cause unexpected compilation issues. Try wiping and reinstalling your dependencies:

# For npm users
rm -rf node_modules package-lock.json
npm install

# For yarn users
rm -rf node_modules yarn.lock
yarn install

5. Check for Modified Babel Config (If You Ejected) #

If you ran npm run eject to customize your CRA setup, make sure you haven't removed the @babel/plugin-proposal-class-properties plugin from your babel config. This plugin is required to transpile arrow function class properties.

In your babel.config.js or .babelrc, ensure you have:

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Example of a Working Implementation #

Here's a complete, valid class component with arrow functions to reference:

import React, { Component } from 'react';

class TodoList extends Component {
  state = { todos: [] };

  // Arrow function as class property (auto-binds `this`)
  addTodo = () => {
    this.setState(prevState => ({
      todos: [...prevState.todos, `Todo ${prevState.todos.length + 1}`]
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.addTodo}>Add Todo</button>
        <ul>
          {this.state.todos.map(todo => (
            <li key={todo}>{todo}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default TodoList;

Start with checking for syntax errors first—they're the most common culprit here. If that doesn't work, move to upgrading react-scripts or resetting dependencies.

内容的提问来源于stack exchange，提问作者Harshit Kedia