React新手求助：本地JSON文件数据无法正常显示问题

核心错误点 #

1. 无需用fetch处理已导入的JSON：你已经通过import data from '../file2.json'把本地JSON文件解析成JS对象/数组了，再用fetch(data)完全多余——fetch接收的是URL字符串，传入解析后的JS数据会直接导致请求失败。
2. 属性引用路径错误：从数据示例来看，餐厅名称嵌套在restaurant对象下，你写的userObj.name找不到对应属性，应该改为userObj.restaurant.name。

修正后的代码 #

import data from '../file2.json'
import React, { useState, useEffect } from "react";

const Planner = () => {
  const [restaurants, setRestaurants] = useState([]);

  useEffect(() => {
    // 直接使用已导入的解析好的JSON数据
    setRestaurants(data);
  }, [])

  return (
    <main>
      <h1>Restaurant List</h1>
      <ul>
        {restaurants.length > 0 && restaurants.map((item) => (
          <li key={item.restaurant.R.res_id}>
            {item.restaurant.name}
          </li>
        ))}
      </ul>
    </main>
  )
};

export default Planner;

额外优化建议 #

• 变量名语义化：把user改成restaurants，避免和用户数据混淆
• 简化初始化逻辑：可以直接在useState里赋值，省去useEffect：

  const [restaurants, setRestaurants] = useState(data);
  

• 检查文件路径：确保../file2.json的相对路径正确，比如组件在src/components下、JSON在src根目录时路径正确，若同目录则改为./file2.json

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