React 组件 InfoTotal.tsx 中数据获取问题及解决方案

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

问题原因：

这可能是因为在构建静态页面时，fetch 请求没有被执行，导致 totalPosts 和 numSorts 的值没有被正确设置。

解决方案：

预渲染技术： 在构建静态页面时使用预渲染技术，确保数据可以被正确获取并显示。可以考虑使用 Next.js 这样的框架来实现预渲染。
Mock 数据测试： 在开发过程中使用 mock 数据来进行测试，以确保组件在不同情况下都能正常工作。

示例代码：

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>
  );
}

总结：

在使用 React 组件获取数据时，需要特别注意静态页面构建时的数据获取问题。通过使用预渲染技术或 mock 数据测试，可以确保组件在不同情况下都能正常工作。