React读取localStorage分类数组后map渲染仅显示No Data的问题

你遇到的连续10次渲染"No data"的问题，是两处代码写法错误共同导致的：

错误1：数组map方法的参数解构逻辑完全错位 #

categories.data.data 是由单个分类实体组成的数组，每个数组元素本身就是包含name/slug/description属性的对象，不存在嵌套的category字段。
你原代码的map写法存在两个参数理解偏差：

• map的第一个回调参数是当前遍历到的单个分类对象，你却试图从这个对象里解构出不存在的category属性，拿到的结果永远是undefined
• map的第二个回调参数直接是当前遍历的索引值（数字类型），你却把它当成包含index属性的对象来解构，同样拿不到预期值
  错误代码片段：

// 完全错位的解构写法
categories.data.data.map(
  ({ category }: { category: any }, { index }: { index: any }) => (

错误2：对象存在性判断逻辑写错 #

你在判断渲染内容时写的是category && category.length > 0：

• 首先category本身就是解构出来的undefined，判断永远不成立
• 就算category存在，分类实体是普通对象，本身没有length属性，这个判断逻辑从设计上就不对

基础可运行版本 #

修正map的参数接收逻辑、调整判断条件，同时加可选链避免空值报错：

{categories?.data?.data?.length > 0 &&
  categories.data.data.map((categoryItem: any, index: number) => (
    <div key={categoryItem.slug || index}>
      {categoryItem.slug ? categoryItem.slug : "No data"}
    </div>
  ))
}

存储逻辑优化 #

你之前存localStorage时直接序列化了整个Axios响应对象，冗余带了请求头、配置、完整鉴权Token这些完全用不到的内容，既占用本地存储，还有暴露敏感信息的风险，建议只存实际需要的分类数组：

// 优化后的存储逻辑
React.useEffect(() => {
  setIsLoading(true);
  getCategoryList().then((categoryRes) => {
    const categoryList = categoryRes.data.data;
    setCategories(categoryList);
    // 只存分类数组本身，去掉冗余的响应外层结构
    localStorage.setItem("categories", JSON.stringify(categoryList));
  });
  setIsLoading(false);
}, []);

注：如果改成存纯分类数组，读取和渲染时就不需要多层嵌套读categories.data.data，直接遍历categories数组即可，代码会更简洁。

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