如何使用钩子清除componentDidUpdate上的异步函数

import React, { useState, useEffect } from 'react';

function MyComponent({ prop }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true; // 添加一个标志来跟踪组件是否仍然挂载

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        if (isMounted) {
          setData(result); // 只有在组件仍然挂载时才更新状态
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData(); // 发起异步请求

    // 清理函数，组件卸载时执行
    return () => {
      isMounted = false; // 组件卸载时设置标志为false
    };
  }, [prop]); // 当prop变化时重新执行副作用函数

  return (
    <div>
      {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
    </div>
  );
}

export default MyComponent;

import React from 'react';

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

  componentDidMount() {
    this.isMounted = true; // 添加一个标志来跟踪组件是否仍然挂载
    this.fetchData();
  }

  componentWillUnmount() {
    this.isMounted = false; // 组件卸载时设置标志为false
  }

  fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      if (this.isMounted) {
        this.setState({ data: result }); // 只有在组件仍然挂载时才更新状态
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
      </div>
    );
  }
}

export default MyComponent;