React项目中如何从本地JSON文件加载数据替代Firebase链接

你原本通过Firebase的HTTP链接获取JSON数据渲染页面，现在想切换到本地JSON文件，但直接导入后用fetch的写法行不通，下面是两种可行的解决方法：

方法一：直接导入JSON文件使用（无需fetch） #

React中导入JSON文件后，它会被自动解析为JavaScript对象，不需要再用fetch和response.json()处理，直接使用即可：

import React, { useState, useEffect } from 'react';
import style from './AvailableMeal.module.css';
import Card from '../UI/Card';
import MealItem from './MealItem/MealItem';
import Food from './food.json'; // 取消注释，导入本地JSON

const AvailableMeal = () => {
  const [Meals, setMeals] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  // 直接处理已解析的JSON对象
  const loadedMeals = [];
  // 注意：如果food.json结构和Firebase返回的一致（带key的对象），用这个循环
  for(const key in Food) {
    loadedMeals.push({
      id: key,
      name: Food[key].name,
      description: Food[key].description,
      price: Food[key].price,
    });
  }
  // 如果food.json本身就是数组（比如[{id:1,...},...]），直接替换为：setMeals(Food)
  setMeals(loadedMeals);
  setIsLoading(false);
}, []);
 
const mealsList = Meals.map((val) => (
  <MealItem id={val.id}
          key={val.id}
          name={val.name}
          description={val.description}
          price={val.price}
  />
));

return (
  <>
   <section className={style.meals}>
   <Card>
   {isLoading ? <div className={style.loading}><p>Loading...</p> </div> : <ul>{mealsList}</ul>}
    </Card>
  </section>
  </>
)
};

export default AvailableMeal;

方法二：用fetch加载本地文件路径 #

如果后续可能切换回远程接口，想保留fetch的逻辑，直接传入JSON文件的相对路径字符串即可，不要传入导入的对象：

import React, { useState, useEffect } from 'react';
import style from './AvailableMeal.module.css';
import Card from '../UI/Card';
import MealItem from './MealItem/MealItem';
// 不需要导入Food

const AvailableMeal = () => {
  const [Meals, setMeals] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
const fetchMeals = async() => {
  // 传入本地JSON文件的相对路径字符串
  const response = await fetch('./food.json');
  const data = await response.json();
  const loadedMeals = [];
  for(const key in data) {
    loadedMeals.push({
      id: key,
      name: data[key].name,
      description: data[key].description,
      price: data[key].price,
    });
  }
  setMeals(loadedMeals);
  setIsLoading(false);
}
  fetchMeals();
}, []);
 
const mealsList = Meals.map((val) => (
  <MealItem id={val.id}
          key={val.id}
          name={val.name}
          description={val.description}
          price={val.price}
  />
));

return (
  <>
   <section className={style.meals}>
   <Card>
   {isLoading ? <div className={style.loading}><p>Loading...</p> </div> : <ul>{mealsList}</ul>}
    </Card>
  </section>
  </>
)
};

export default AvailableMeal;

错误原因说明 #

你之前的写法const response = await fetch(Food)之所以失败，是因为import Food from './food.json'已经把JSON文件解析成了JavaScript对象，而fetch()函数需要接收的是URL字符串，不是已解析的对象，因此导致请求报错。

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