reactjs - 在 React JS 中使用异步方法加载本地 JSON 文件

Question

在这里，我尝试使用异步函数加载本地 JSON 文件。我正在尝试在控制台中记录数据，有什么解决方案吗？

import { useEffect } from "react";
import "./styles.css";

export default function App() {
  useEffect(() => {
   fetchItems();
});
const fetchItems = async () => {
  const res = await fetch("./users.json");
  const data = await res.json();
  console.log(data);
};

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
  </div>
);
}

这是我的 JSON 文件，名为 users.json。

[
    {
        "id": 1,
        "first_name": "random",
        "last_name": "random"
    }, {
        "id": 2,
        "first_name": "random",
        "last_name": "random"
    }
]

Answer 1

您可以直接使用 import data from "./users.json" 导入。

或者你可以使用await fetch("http://localhost:3000/users.json");。为此，您应该将 json 保存在公共(public)文件夹中。