React项目本地正常显示映射列表，部署Firebase后不显示

本地测试时，从JSON文件获取数据并映射生成的分类列表正常展示；但构建部署到Firebase后列表空白，控制台无报错，排查发现useEffect钩子内的代码未执行。

问题根源 #

核心错误出在useEffect的逻辑里：你定义了categories函数，但没有主动调用它，反而把它作为useEffect的返回值（这是组件卸载时才会触发的清理函数）。本地开发环境可能因为热重载、缓存等偶然因素让代码“意外”生效，但生产构建后逻辑严格执行，导致useEffect挂载阶段完全没运行分类处理代码，categories状态一直是undefined，最终列表无内容。

另外还有两个小问题：

• 函数名categories和state变量重名，容易造成混淆
• array.map((stack) => stack)属于冗余代码，array本身已经是所有stack元素的集合，不需要额外map处理

修复方案 #

修改useEffect逻辑，主动调用分类处理函数，并优化代码：

import { useState, useEffect } from 'react';
import Projects from '../projects/projects.json';
import { v4 as uuidv4 } from 'uuid';

const CategoryList = () => {
    const [projects, setProjects] = useState(Projects);
    const [categories, setCategories] = useState([]); // 初始设为空数组，简化渲染逻辑

    useEffect(() => {
        const getCategories = () => { // 改名避免和state重名
            let array = [];
            projects.forEach((project) => {
                array.push(...project.stack);
            });
            const uniqueCategories = [...new Set(array)]; // 去掉冗余map
            setCategories(uniqueCategories);
        };

        getCategories(); // 挂载时主动执行函数
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <FilterContainer>
            <ul>
                {categories.map((category) => <li key={uuidv4()}>{category}</li>)} {/* 无需判断categories是否存在 */}
            </ul>
        </FilterContainer>
    );
};

export default CategoryList;

后续排查方向 #

• 验证useEffect执行逻辑：明确区分useEffect的主执行代码和return的清理函数，确保核心逻辑在组件挂载/更新时主动调用
• 本地预演生产环境：部署前先执行npm run build，然后用静态服务器（如npx serve build）本地验证生产构建后的效果，提前发现问题
• 生产环境日志排查：开启浏览器控制台的「保留日志」选项刷新页面，查看是否有被压缩隐藏的报错；同时检查Firebase的部署日志，确认静态资源（如JSON文件）是否被正确上传
• 依赖数组检查：即使跳过了exhaustive-deps提示，也要确认useEffect的依赖是否合理——如果projects是动态获取的，必须加入依赖数组；静态JSON的话可以留空，但要确保导入路径正确
• 静态资源验证：确认JSON文件在构建后的dist/build目录中存在，路径与代码中的导入路径一致，Firebase部署配置没有忽略该文件

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