如何在React组件中获取public文件夹下JSON文件并计算数组长度展示到仪表盘

问题原因 #

你直接在JSX中调用fetch的写法存在两个核心错误：

• fetch是异步API，返回的是Promise实例而非请求结果，直接对Promise调用Object.keys()只能拿到Promise实例的自带属性，长度自然为0
• 把请求逻辑直接写在JSX渲染逻辑中，会导致组件每次渲染都重复发起请求，引发性能问题和不必要的请求开销

解决方案 #

你可以根据自己的使用场景二选一：

方案1：静态JSON直接导入（推荐，无需异步请求） #

如果这两个JSON文件不需要在线动态修改、每次更新都跟随项目打包，直接把public/data目录移动到src目录下（比如src/assets/data），然后直接导入使用即可：

import React from 'react'
import '../Navbar/navbar.css'
import '../Dashboard/dashboard.css'
// 导入JSON文件，路径对应你移动后的实际路径
import users from '../assets/data/users.json'
import subscriptions from '../assets/data/subscriptions.json'

const Dashboard = () => {
    return (
        <div>
            <main>
                <h1 className= "heading">Welcome to Dashboard</h1>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat accusantium
                    rerum dolorem odio amet id blanditiis nobis incidunt consequuntur
                    molestiae doloribus corrupti quidem dolor ex, assumenda beatae dolore?
                    Voluptatem, ab?Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                </p>

                <div className="users_view">
                    <div className="flexs">
                        <div className="total_users">
                            {/* 直接取数组长度即可，如果你的JSON是对象包裹的就对应取属性下的数组 */}
                            <h1>Total Users: {users.length} </h1>
                        </div>
                    </div>
                    <div className="flexs">
                        <div className="total_users">
                            <h1>Subscribed user: {subscriptions.length}</h1>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    )
}

export default Dashboard

方案2：保留public目录存放，异步请求获取 #

如果JSON需要独立于项目打包动态修改，保留在public/data目录下，用useState存数据、useEffect在组件挂载时发起请求即可：

// 导入需要的Hook
import React, { useState, useEffect } from 'react'
import '../Navbar/navbar.css'
import '../Dashboard/dashboard.css'

const Dashboard = () => {
    // 定义状态存数量
    const [userCount, setUserCount] = useState(0)
    const [subCount, setSubCount] = useState(0)

    useEffect(() => {
        // 组件挂载时获取数据
        const fetchData = async () => {
            try {
                // 请求public下的资源路径前加/，避免路由嵌套时路径错误
                const userRes = await fetch('/data/users.json')
                const userData = await userRes.json()
                setUserCount(userData.length)

                const subRes = await fetch('/data/subscriptions.json')
                const subData = await subRes.json()
                setSubCount(subData.length)
            } catch (err) {
                console.error('数据获取失败：', err)
            }
        }
        fetchData()
    }, [])

    return (
        <div>
            <main>
                <h1 className= "heading">Welcome to Dashboard</h1>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat accusantium
                    rerum dolorem odio amet id blanditiis nobis incidunt consequuntur
                    molestiae doloribus corrupti quidem dolor ex, assumenda beatae dolore?
                    Voluptatem, ab?Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                </p>

                <div className="users_view">
                    <div className="flexs">
                        <div className="total_users">
                            <h1>Total Users: {userCount} </h1>
                        </div>
                    </div>
                    <div className="flexs">
                        <div className="total_users">
                            <h1>Subscribed user: {subCount}</h1>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    )
}

export default Dashboard

注意：如果你的JSON文件不是顶层数组，是类似{"list": [...]}的结构，需要把.length替换为对应属性的数组长度，比如userData.list.length

内容的提问来源于stack exchange，提问作者Rakesh Shrestha