React 组件中获取 API 数据并渲染：InfoTotal 组件示例

本示例展示了如何使用 React 组件 InfoTotal 获取 /api/total.ts 路径下的 API 数据，并将其渲染到页面上。

1. InfoTotal 组件代码

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

export default function InfoTotal() {
    const [total, setTotal] = useState(0);

    useEffect(() => {
        fetch('/api/total.ts')
            .then(res => res.json())
            .then(data => setTotal(data.totalPosts))
            .catch(err => console.error(err));
    }, []);

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

2. SiteRuntime 组件代码

export function SiteRuntime({ total }) {
    return (
        <li><span className='l'>文章数目：</span><span className='r'>{total}</span></li>
    )
}

代码说明

在 InfoTotal 组件中使用 useState 钩子定义一个状态变量 total 用于存储从 API 获取到的数据。
使用 useEffect 钩子发送 GET 请求获取 /api/total.ts 路径下的数据。
使用 fetch 方法发送 GET 请求，并使用 then 方法处理响应，将数据解析为 JSON 格式并更新 total 状态变量。
将 total 状态变量通过 props 传递给 SiteRuntime 组件，并在 SiteRuntime 组件中进行渲染。

总结

本示例展示了如何使用 React 组件获取 API 数据并进行渲染。通过使用 fetch 或 axios 等工具发送 GET 请求获取数据，并使用 useState 和 useEffect 钩子管理数据状态，最后将数据通过 props 传递给子组件进行渲染。