在useEffect之后如何在react中运行数据

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        if (isMounted) {
          setData(result);
        }
      });

    return () => {
      isMounted = false;
    };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  useEffect(() => {
    if (data) {
      // 在这里执行基于数据的操作
      console.log('Data has been fetched:', data);
      // 例如，更新UI或其他逻辑
    }
  }, [data]); // 当data变化时执行

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

export default DataFetchingComponent;