无法读取AJAX调用中未定义的属性“”setState“”

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    this.isMounted = false;
  }

  componentDidMount() {
    this.isMounted = true;
    this.fetchData();
  }

  componentWillUnmount() {
    this.isMounted = false;
  }

  fetchData() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        if (this.isMounted) {
          this.setState({ data });
        }
      })
      .catch(error => console.error('Error:', error));
  }

  render() {
    return (
      <div>
        {this.state.data ? <p>{this.state.data}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  state = { data: null };

  async componentDidMount() {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Error:', error);
    }
  }

  render() {
    return (
      <div>
        {this.state.data ? <p>{this.state.data}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    this.fetchData = this.fetchData.bind(this); // 绑定this
  }

  fetchData() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .catch(error => console.error('Error:', error));
  }

  componentDidMount() {
    this.fetchData();
  }

  render() {
    return (
      <div>
        {this.state.data ? <p>{this.state.data}</p> : <p>Loading...</p>}
      </div>
    );
  }
}