React页面API数组数据不显示，useEffect调用后页面空白问题排查

问题根源分析 #

1. 状态初始化依赖未就绪数据：初始化catItems时使用的allCategory依赖filteredData，但组件挂载时filteredData为空，导致catItems初始值仅为["All"]；后续在useEffect中错误将原始菜品对象数组直接赋值给catItems，遍历渲染时每个<li>尝试渲染对象，引发页面报错空白。
2. 分类数组生成逻辑错误：useEffect里setCatItems(data)是核心错误——catItems应该是分类名称的字符串数组，而非接口返回的菜品对象数组。

解决方案 #

1. 修正状态初始化 #

确保状态初始值不依赖未加载的异步数据，避免渲染时的空值/类型错误：

const [data, setData] = useState([]);
const [mainArray, setMainArray] = useState([]);
// 初始仅保留"All"分类，后续通过接口数据更新
const [catItems, setCatItems] = useState(["All"]);

2. 修正useEffect中的分类数组生成逻辑 #

获取接口数据后，基于菜品数据生成正确的分类名称数组，再更新catItems：

useEffect(() => {
  async function fetchData() {
    try {
      const response = await fetch('https://63b6952d1907f863aafa9342.mockapi.io/menu/');
      const fetchedData = await response.json();
      setData(fetchedData);
      setMainArray(fetchedData);
      // 从菜品数据中提取去重的分类，拼接"All"后更新状态
      const categories = ["All", ...new Set(fetchedData.map(item => item.Category))];
      setCatItems(categories);
    } catch (error) {
      console.error(error);
    }
  }
  fetchData();
}, []);

3. 保留原有分类渲染逻辑 #

此时catItems为字符串数组，原有渲染代码可正常工作：

<div>
  {catItems.map((curClem, index) => {
    return <li key={index} onClick={() => filterItem(curClem)}>{curClem}</li>;
  })}
</div>

可选优化：用useMemo自动生成分类数组 #

如果后续data会更新，可通过useMemo自动同步分类数组，减少手动状态更新：

const catItems = useMemo(() => {
  return ["All", ...new Set(data.map(item => item.Category))];
}, [data]);
// 此时可移除catItems的useState和setCatItems调用

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