React中useEffect钩子未执行求助：JSON数据获取失败

核心排查步骤 #

先在组件顶层添加日志，确认组件是否挂载：

const RestaurantLayout = ({ children: Component, ...props }) => {
    console.log("RestaurantLayout 已渲染");
    const [restaurant, setRestaurant] = useState([])

    useEffect(() => {
        console.log("useEffect 已触发");
        fetch('/restaurantData.json')
        // 新增响应状态检查
        .then(response => {
            console.log("请求响应:", response);
            if (!response.ok) {
                throw new Error(`请求失败：${response.status}`);
            }
            return response.json();
        })
        .then((resData) => {
            console.log("获取到的数据:", resData);
            setRestaurant(resData);
        })
        .catch(error => console.error("请求错误:", error));
    }, [])

    // 确保无论数据是否存在，都渲染子组件或占位内容
    return (
        <div>
            {Component ? <Component restaurant={restaurant} {...props} /> : <div>加载中...</div>}
        </div>
    )
}

可能的原因与解决方法 #

1. 组件未挂载 #

• 如果控制台没有输出RestaurantLayout 已渲染，说明父组件渲染逻辑存在问题：比如父组件仅在restaurant有数据时才渲染RestaurantLayout，导致初始状态为空时组件根本没挂载。
• 解决：调整父组件逻辑，确保RestaurantLayout始终被挂载，数据加载状态由组件内部处理。

2. 请求路径或JSON文件问题 #

• 如果控制台输出useEffect 已触发但出现404错误，说明JSON文件路径错误：
  • 检查文件名大小写（比如restaurantData.json和restaurantdata.json会被系统视为不同文件）
  • 使用process.env.PUBLIC_URL确保路径正确：

    fetch(`${process.env.PUBLIC_URL}/restaurantData.json`)
    

• 如果JSON解析报错，说明文件格式错误：检查JSON文件是否有语法错误（比如逗号缺失、引号不匹配、括号不闭合）。

3. 子组件依赖数据渲染 #

• 初始状态为空数组时，子组件（Component）因为没有数据不渲染，但RestaurantLayout本身已挂载，useEffect其实已经执行，只是页面空白让你误以为钩子没触发。
• 解决：在子组件中添加加载状态或占位内容，确保数据加载过程中页面有反馈，同时确认子组件能处理空数组的情况。

4. React严格模式的影响（少见） #

• 严格模式下，useEffect会执行两次，但不会完全不执行。如果开发环境中出现异常，可以暂时关闭严格模式测试，但生产环境不会有这个问题。

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