useEffect fetch 未从本地检索数据 db.json

Question

我正在尝试通过使用 db.json 文件（相对路径：src\plant-api\db.json）模拟 Plant API，并从父组件传递它 ( ItemList) 到它的子项 (Item) 但它不起作用，因为我在屏幕上看不到任何数据显示，即使我可以在我的 console.log 中看到它。这是完整的代码

import React, { useState, useEffect } from "react";
import Item from "./Item";
import Data from "../plant-api/db.json"

const ItemList = () => {
  const [plants, setPlants] = useState([]);

  useEffect(() => {
    fetch(Data)
      .then((response) => response.json())
      .then((data) => setPlants(data));
  }, []);

  console.log(Data)

  return (
    <div className="items">
      {plants.map((plant) => {
        return (
          <div>
            <Item data={plant} />
          </div>
        );
      })}
    </div>
  );
};

export default ItemList;

import React from "react";
import ItemCount from "./ItemCount";

const Item = ({ data }) => {
  return (
    <div>
      <div className="item">
        <img src={data.pic} alt="plant-image" />
        <h3>{data.name}</h3>
        <p>{data.category}</p>
        <h4>{data.price}</h4>
        <ItemCount stock="10" initial="0" />
      </div>
    </div>
  );
};

export default Item;

directory structure

需要并感谢任何帮助！

Answer 1

也许你可以使用 json-server 包，这样你就可以创建一个虚拟 API,.

在终端中使用如下代码的示例，确保代码在 db.json 文件目录中为运行。

npx json-服务器db.json-p2000

稍后会有一个 json 服务器运行ning 作为端口 2000

上的 API

Answer 2

fetch 用于进行网络调用，但由于您已经导入了数据，因此只需在 useEffect 挂钩中设置数据即可：setPlants(Data);如果您只是想看看，这应该足够了数据如何呈现。

Answer 3

如果你的数据已经是 JSON 格式，你不需要使用 fetch，你可以直接将它弹出到 const [plants, setPlants] = useState(Data).

如果您要模拟现场直播 API，您将必须创建一个虚拟机 API，如 Dedi 所述。

useEffect fetch 未从本地检索数据 db.json

useEffect fetch not retrieving data from local db.json

javascript

api

fetch

reactjs