如何防止 React 页面渲染两次

问：

我正在使用 react 18 StrictMode，并且在从一个页面导航到另一个页面（使用路由器）时，应用程序中有一些页面，首先显示一个空页面，并在 2 3 秒后页面刷新并显示数据。

示例：当我导航到此页面时，页面中有饼图 空网格首先显示，之后页面重新加载和饼图显示

我尝试了几种方法来防止它 1.微调器使用 use state、useRef 检查和 Suspense CallBack，但没有任何效果。

这是我的示例代码

服务.js

import axios from 'axios';
//demo code
class Service {

  async fetchData1() {
    try {
      const response = await axios.get("https//some-end-point");
      return response.data;
    } catch (error) {
      console.log('Error retrieving data:'+ error);
    }
  }

  async fetchData2(){
      try {
        const response = await axios.get("https//some-end-point");
        return response.data;
      } catch (error) {
        console.log('Error retrieving data:'+ error);
      }
  }

}
export default new Service();

仪表板.js

import React, { useEffect, useState } from 'react';
import Service from '../services/Service';

const Dashboard = () => {
  const [BarData, setBarData] = useState([]);
  const [StatsData, setStatsData] = useState([]);
  const [PieData, setPieData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data1 = await Service.fetchData1();
        const data2 = await Service.fetchData2();
        if (data1) setBarData(data1);
        if (data2) setStatsData(data2);
      } catch (error) {
        console.log('Error fetching data:' + error);
      }
      setIsLoading(false);
    };

    fetchData();
  }, []);

  setPieData([
    {
      label: 'Label A',
      value: StatsData['Total Data A'],
    },
    {
      label: 'Label B',
      value: StatsData['Total Data B'],
    },
  ]);

  const PieDataChart = {
    series: PieData.map(item => item.value),
    options: {
      chart: {
        type: 'pie',
        width: 300,
        height: 300,
      },
      dataLabels: {
        enabled: false,
      },
      labels: PieData.map(item => item.label),
      //some properties
    },
  };

  if (isLoading) {
    return (
      <div className="loader">
        <RingLoader color="#36D7B7" loading={true} size={100} />
      </div>
    );
  }

  return (
    <div className="page-container">
      {/* demo data*/}
      <div className="pieChart-Wrapper">
        <div className="pieChart">
          <ReactApexChart options={PieDataChart.options} series={PieDataChart.series} type="pie" />
        </div>
      </div>
    </div>
  );
};

export default Dashboard;

我只想渲染页面一次，以防止第一次重新加载时出现空渲染，请帮帮我。

注意：我在useEffect中添加了一些日志，当从另一个页面导航到此页面时，会发出一个请求，它返回undefined，几秒钟后，一个请求正在发出，这次它获取数据。

谢谢