React 静态页面数据丢失问题：InfoTotal 组件数据显示为 0 的解决方法

在 /components/InfoTotal.tsx 里的代码使用 npm run dev 的时候可以正常显示出 {numSorts} 和 {totalPosts} ，使用 npm run build 生成静态页后 {numSorts} 和 {totalPosts} 都显示为0，具体怎么做呢？

1. 确认在生成静态页之前，是否执行了接口数据的导入操作。如果没有导入数据，那么在生成静态页时就无法正确显示数据。

2. 如果已经导入了数据，那么可能是因为静态页中的 API 路径没有正确设置。在开发环境中，使用的是相对路径 /api/total，而在生产环境中，需要使用绝对路径。可以尝试修改代码中的 API 路径为绝对路径，如 https://example.com/api/total。

3. 如果以上两个方法都没有解决问题，可以尝试在生成静态页时手动传递数据。可以在生成静态页的命令中添加 --data 参数，将数据以 JSON 格式传递给应用程序。例如，使用命令 npm run build -- --data='{"totalPosts": 100, "numSorts": 10}' 来生成静态页，并手动传递数据。在应用程序中，可以使用 process.env.DATA 来获取传递的数据。

以下提供一些代码示例：

// InfoTotal.tsx
import { useEffect, useState } from 'react';
import { SiteRuntime } from './SiteRuntime';

export default function InfoTotal() {
  const [totalPosts, setTotalPosts] = useState<number>(0);
  const [numSorts, setNumSorts] = useState<number>(0);

  useEffect(() => {
    async function fetchTotal() {
      const res = await fetch('/api/total');
      const { totalPosts, numSorts } = await res.json();
      setTotalPosts(totalPosts);
      setNumSorts(numSorts);
    }
    fetchTotal();
  }, []);

  return (
    <section className='info'>
      <div className='info-fanma'>
        <h2>导航信息</h2>
        <ul>
          <li>
            <span className='l'>网站目录：</span>
            <span className='r'>{numSorts}</span>
          </li>
          <li>
            <span className='l'>收录网站：</span>
            <span className='r'>{totalPosts}</span>
          </li>
          <SiteRuntime />
        </ul>
      </div>
    </section>
  );
}

# 生成静态页面时传递数据
npm run build -- --data='{"totalPosts": 100, "numSorts": 10}'

// 获取传递的数据
const data = JSON.parse(process.env.DATA);
const totalPosts = data.totalPosts;
const numSorts = data.numSorts;

通过以上方法，您可以解决 React 静态页面数据丢失的问题，确保在生成静态页面后也能正常显示数据。