React执行setState后状态为空、数组map遍历不渲染问题

你的代码存在两个核心问题，和后端逻辑无关：

• 状态打印结果和DevTools不一致是React useState的正常闭包特性：setState是异步触发状态更新的，更新动作不会修改当前执行上下文里的旧状态值，只会在组件下一次重渲染时传入新的状态值。你在axios回调外、当前渲染周期的上下文里打印状态，拿到的永远是初始的空数组；DevTools展示的是状态的最新快照，二者不冲突，不属于异常。
• 列表无法渲染是Array.map的写法错误：你给map传入的回调函数用大括号{}包裹了JSX逻辑，但是没有手动return要渲染的元素。箭头函数使用大括号包裹函数体时，不会自动返回内部内容，最终map生成的数组全是undefined，自然无法渲染出任何列表项。

1. 修正map回调的返回值，两种写法都可以：
   写法1：大括号包裹函数体时，手动return JSX

   {category.map((c) => {
     return (
       <div
         className="col-12 col-sm-12 col-md-3 col-lg-3 border"
         key={c.slug}
       >
         <a href="" className="text-dark">
           <div className="d-flex justify-content-around align-items-center p-3">
             <img
               src={c.image}
               width={100}
               alt={c.name}
             />
             <div className="text-center">
               <p className="fs-2">{c.name}</p>
               <small>{c.product_count}</small>
             </div>
           </div>
         </a>
       </div>
     )
   })}
   

   写法2：省略大括号，用小括号直接包裹JSX，箭头函数会自动返回内容，写法更简洁

   {category.map((c) => (
     <div
       className="col-12 col-sm-12 col-md-3 col-lg-3 border"
       key={c.slug}
     >
       <a href="" className="text-dark">
         <div className="d-flex justify-content-around align-items-center p-3">
           <img
             src={c.image}
             width={100}
             alt={c.name}
           />
           <div className="text-center">
             <p className="fs-2">{c.name}</p>
             <small>{c.product_count}</small>
           </div>
         </div>
       </a>
     </div>
   ))}
   

2. 补全你代码里缺失的JSX闭合标签，避免语法报错。
3. 如果需要在状态更新后拿到最新的状态值做逻辑处理，不要在setState调用后直接读取状态，把逻辑放到useEffect里，把对应状态加入依赖数组即可。

内容的提问来源于stack exchange，提问作者Nay Aung Lin