React中使用axios.get获取后端对象数组无法更新state求助

问题拆解 #

从你的控制台输出能看出来，后端数据已经成功拿到，state也完成了更新，但有两个关键问题导致渲染失败：

1. setState异步特性的误解：setCategories是异步操作，调用后立刻打印categories会拿到更新前的初始空数组，但后续的Outside Effect[object Object],[object Object]已经证明state已经更新为目标数组。
2. map函数未返回JSX元素：渲染表格时，map回调用了大括号{}但没有返回对应的<tr>元素，导致没有生成任何DOM节点。

修复方案 #

1. 修正控制台打印的误解（可选） #

如果想确认state更新后的真实值，不要在setCategories后立刻打印，而是用useEffect监听categories的变化：

useEffect(() => {
  console.log("更新后的分类数据:", categories);
}, [categories]);

2. 修复表格渲染的map函数 #

两种方式任选其一：

方式一：用小括号自动返回JSX

<tbody>
  {categories.map((c) => (
    <tr key={c._id}>
      <td>{c.name}</td>
      <td>{/* 这里可以添加编辑/删除等操作按钮 */}</td>
    </tr>
  ))}
</tbody>

方式二：手动添加return关键字

<tbody>
  {categories.map((c) => {
    return (
      <tr key={c._id}>
        <td>{c.name}</td>
        <td>{/* 操作按钮区域 */}</td>
      </tr>
    );
  })}
</tbody>

3. 额外优化：添加加载状态（可选） #

避免数据未返回时表格为空，提升用户体验：

const [categories, setCategories] = useState([]);
const [loading, setLoading] = useState(true); // 新增加载状态

const getAllCategory = async () => {
  try {
    setLoading(true);
    const { data } = await axios.get("/api/v1/category/get-category");
    if (data.success) {
      setCategories(data.category);
    }
  } catch (error) {
    console.log(error);
    toast.error("获取分类失败");
  } finally {
    setLoading(false); // 请求结束后关闭加载状态
  }
};

// 渲染时处理加载状态
return (
  <div>
    {loading ? (
      <p>加载中...</p>
    ) : (
      <table className="table">
        {/* 表格内容 */}
      </table>
    )}
  </div>
);

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