TypeError: loaddcategories.Map不是函数

Question

我是React的新手，我试图在使用Axios获得成功数据后显示类别帖子列表。

但是我遇到一个错误TypeError: loaddcategories。Map不是函数．我读了一些解决方案，但现在没有找到答案。

下面是我的代码:

import React, { useEffect, useState } from "react";
import axios from "axios";
const NewCategory = () => {
const [loadedCategories, setloadedCategories] = useState([]);
useEffect(() => {
const getCategoriesData = async () => {
try {
const response = await axios.get(
"http://localhost:5000/api/category/all-category"
);
console.log(response);
const responseData = response.data;
setloadedCategories(responseData);
} catch (err) {
console.log(err);
}
};
getCategoriesData();
}, []);
return (
<ul>
{loadedCategories &&
loadedCategories.map((categories) => {
return (
<li key={categories.id}>
<span>{categories.name}</span>
</li>
);
})}
</ul>
);
};
export default NewCategory;

谢谢你的帮助!

Answer 1

因为您使用异步函数来获取此数据，并且需要一些时间来获取它，因此您必须确保您的.map函数能够使用它。因此，您不仅需要检查loadedCategories是否不是null或undefined，因为您在初始化时将它们设置为空数组，因此它将通过。你必须检查数组是否有一些元素，然后用.map覆盖它们。所以改成:

{loadedCategories && loadedCategories.length > 0 &&
loadedCategories.map((categories) => {

应该在这里工作:)

也有更短的版本:

{loadedCategories?.length > 0 &&
loadedCategories.map((categories) => {