class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    // 错误：在构造函数中调用 setState
    // this.setState({ data: 'initial' }); 
  }

  componentDidMount() {
    // 正确：在组件挂载后设置状态
    this.setState({ data: 'initial' });
    
    // 异步操作示例
    fetchData().then(data => {
      // 检查组件是否仍然挂载
      if (this._isMounted) {
        this.setState({ data });
      }
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }
}

function MyComponent() {
  const [data, setData] = useState(null);
  const isMounted = useRef(true);

  useEffect(() => {
    // 组件挂载时设置初始状态
    setData('initial');
    
    fetchData().then(data => {
      if (isMounted.current) {
        setData(data);
      }
    });

    return () => {
      // 组件卸载时标记
      isMounted.current = false;
    };
  }, []);

  return <div>{data}</div>;
}

class MyComponent extends React.Component {
  _pendingPromises = [];

  componentDidMount() {
    const promise = fetchData()
      .then(data => this.setState({ data }))
      .catch(error => console.error(error));
    
    this._pendingPromises.push(promise);
  }

  componentWillUnmount() {
    // 取消所有未完成的 Promise
    this._pendingPromises.forEach(promise => {
      if (promise.cancel) promise.cancel();
    });
    this._pendingPromises = [];
  }
}

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch(url, { signal })
    .then(response => response.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('Fetch aborted');
      } else {
        // 处理其他错误
      }
    });

  return () => {
    controller.abort();
  };
}, []);