React调用带参函数映射filterCategories时出现enqueueSetState未定义报错

Hey, let's break down what's causing this error and fix it up for you. That error almost always boils down to incorrect this binding in your React component method, and there are a few other small issues in your code that we'll tackle too.

What's Going Wrong? #

When your sort method gets called (likely as an event handler), the this keyword inside it isn't pointing to your FrontPage component instance. So when you try to call this.setState (even though your code snippet cuts off, I assume that's what you're trying to do with the ajax response), this is undefined—and React can't find the internal enqueueSetState method it needs to update the state.

Also, there are a couple of other small bugs:

• Your constructor doesn't pass props to super(), which can cause unexpected issues with this.props later on.
• The parameter in your sort method is named event, but you tried to use e in the ajax data field—those need to match.
• You're returning the ajax request, but you probably want to handle the response to update your filterCategories state.

Fixes Step by Step #

1. Fix this Binding (Two Easy Options)

The simplest way to make sure this points to your component is to use an arrow function for the sort method. Arrow functions automatically inherit the this context from where they're defined—your component instance:

interface FrontPageComponents { filterCategories: GetTheActivity[]; }
export class FrontPage extends React.Component<RouteComponentProps<{}>, FrontPageComponents> {
  constructor(props: RouteComponentProps<{}>) {
    super(props); // Don't forget to pass props here!
    this.state = {filterCategories: []};
  }

  // Use arrow function to auto-bind this
  public sort = (event: string) => {
    console.log(event);
    $.ajax({
      type: "POST",
      url: './Categ/GetFilterCategories',
      dataType: 'json',
      data: { _event: event }, // Match the parameter name here
      success: (response) => {
        // Arrow function here keeps `this` pointing to the component
        this.setState({
          filterCategories: response // Assume response matches GetTheActivity[] type
        });
      },
      error: (xhr, status, error) => {
        console.error('Request failed:', error);
      }
    });
  }
}

If you prefer not to use arrow functions, you can manually bind this in the constructor instead:

constructor(props: RouteComponentProps<{}>) {
  super(props);
  this.state = {filterCategories: []};
  // Bind `sort` method to the component instance
  this.sort = this.sort.bind(this);
}

// Regular function (works because we bound it in constructor)
public sort(event: string) {
  console.log(event);
  $.ajax({
    type: "POST",
    url: './Categ/GetFilterCategories',
    dataType: 'json',
    data: { _event: event },
    // Use arrow function for success callback to keep correct `this`
    success: (response) => {
      this.setState({ filterCategories: response });
    }
  });
}

2. Other Critical Fixes

• Always pass props to super() in your constructor—this ensures this.props works correctly throughout the component.
• Make sure the parameter name in data matches the one you're receiving in the sort method (event instead of e).
• Add a success callback to your ajax request to actually update the filterCategories state with the response.

Quick Recap #

The core issue was broken this binding, which made this.setState unavailable. By using arrow functions or manual binding, you ensure this refers to your component instance. Fixing the constructor props and parameter name mismatch will prevent other unexpected bugs too.

内容的提问来源于stack exchange，提问作者John Kings