如何将公用文件夹 .json 文件提取到反应组件中答案

【问题标题】：How to fetch public folder .json file into react component如何将公用文件夹 .json 文件提取到反应组件中
【发布时间】：2021-08-25 17:33:47
【问题描述】：

我正在尝试计算数组并在仪表板上显示数字。我尝试fetch('data/users.json)，但出现显示 0 的错误。需要从 data 文件夹内 public 文件夹中的两个 JSON 文件计算 id，您可以在下面的代码中看到。

import React from 'react'
import '../Navbar/navbar.css'
import '../Dashboard/dashboard.css'
// import UserList from "./data/users.json"

const Dashboard = () => {

    
    return (
        <div>
            <main>
                <h1 className= "heading">Welcome to Dashboard</h1>
                    {/* <p> User data list : {Object.keys(UserData).length}</p>
                    <p>Suscriber list: {Object.keys(Suscriber).length}</p> */}
                <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: {Object.keys(fetch('data/users.json')).length} </h1>
                        </div>
                    </div>
                    <div className="flexs">
                        <div className="total_users">
                            <h1>Subscribed user: {Object.keys(fetch('data/subscriptions.json')).length}</h1>
                        </div>
                    </div>
                </div>
                
                
            
            </main>
        </div>
    )
}

export default Dashboard

下图是目录：

任何人都可以帮助我获取这 2 个 JSON 数据并计算要显示在仪表板上的数组编号。下图显示了输出：

【问题讨论】：

请阅读How to Ask。关于不发文字图片的部分。
请将代码粘贴到问题中
并阅读fetch 的介绍性指南。它不会返回同步解析的 JSON。
好的，谢谢！我试图放置目录图像，但我放置了整个 SS。很抱歉。

标签： javascript reactjs json

【解决方案1】：

这就是我建议导入 json 文件的方式：

import React from 'react'

export default function App() {
  const [users,setUsers] = React.useState([{}])
  React.useEffect(()=>{
    fetch('data/users.json').then((res)=>res.json()).then((data)=>{
      setUsers(data)
     })
     
  },[])
  return (
    <div className="App">
      <h1>Users:{users.length}</h1>
    </div>
  );
}

这是示例users.json 文件：

[
  {
    "id": 1,
    "name": "name"
  },
  {
    "id": 2,
    "name": "name 2"
  }
]

这是主目录的结构：

这是code

【讨论】：

users.json 文件放置在数据文件夹内的公用文件夹中。我试过了，但没有用
@RakeshShrestha 请检查我的更新。如果您发现它按预期工作，您可以接受答案。

【解决方案2】：

您可以尝试导入您的 JSON：

import data from 'data/users.json'

然后做一个数据的长度

Object.keys(data).length

或使用 JSON.parse

【讨论】：

users.json 文件放置在数据文件夹内的公用文件夹中。我试过了，但没有用
嗯，确实应该放在src/ 中应该可以工作
是的，当我将它放在src 文件夹中时它可以工作。但我需要从public 文件夹中获取它。无论如何，我得到了答案，谢谢你的回答。