React下拉菜单无法渲染API返回的资产分类名称问题求助

大家好，我最近在开发React项目时遇到了个头疼的问题：下拉菜单没办法渲染出API返回的资产分类名称，想请各位帮忙排查下问题所在。

我的下拉菜单代码如下： #

<select 
  name="AssetCategory" 
  value={formData.AssetCategory} 
  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => 
    setFormData((prev) => ({ 
      ...prev, 
      AssetCategory: Number(e.target.value), 
    })) 
  } 
  className="w-full border border-teal-500 p-2 rounded-lg" 
>
  <option value="">Select a Category</option>
  {Array.isArray(CategoryData) && CategoryData.map((category) => (
    <option key={category.catID} value={category.catID}>
      {category.catName}
    </option>
  ))}
  <option>Nothing</option>
</select>

获取分类数据的代码： #

const fetchCategories = async () => {
  try {
    const { data }: { data: TypeCatgRes } = await api.get("/AssetCategory");
    setCategoryData(data.results || data);
  } catch (error) {
    console.error("Error fetching categories:", error);
  }
};

useEffect(() => {
  fetchCategories();
}, []);

目前的问题是：下拉菜单里只显示默认的「Select a Category」和手动加的「Nothing」选项，API返回的分类名称完全没渲染出来。我已经确认Postman调用/AssetCategory接口能正常返回数据，但就是没法在页面上显示。

我自己初步排查了几个方向，但还没找到原因，想请教大家：

• 是不是我处理API返回数据的逻辑有问题？比如data.results || data的判断是否匹配实际的接口返回结构？
• 有没有可能CategoryData的结构和我预期的不一样？比如数组里的元素没有catID或catName字段？
• 是不是React状态更新有延迟，导致渲染时数据还没到位？不过我已经用Array.isArray(CategoryData)做了判断，按理说不会渲染空数组的情况吧？

麻烦各位帮忙看看，谢谢大家！

内容来源于stack exchange