class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    // 方法1：在构造函数中绑定this
    this.handleResponse = this.handleResponse.bind(this);
  }

  fetchData() {
    fetch('/api/data')
      .then(response => response.json())
      // 方法2：使用箭头函数自动绑定this
      .then(data => this.handleResponse(data))
      .catch(error => console.error(error));
  }

  // 方法3：使用类字段语法（需要Babel支持）
  handleResponse = (data) => {
    this.setState({ data }, () => {
      // 这里是setState的回调，可以确保状态已更新
      console.log('状态已更新:', this.state.data);
    });
  }
}

componentDidMount() {
  this._isMounted = true;
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      if (this._isMounted) {
        this.setState({ data });
      }
    });
}

componentWillUnmount() {
  this._isMounted = false;
}

async fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    this.setState({ data });
    console.log('状态已更新:', this.state.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}