我正在嘗試從strapi api獲取一些資料，但遇到了一個問題，它指出.map不是badgeCategories的函式。
這是獲取 API 并更新徽章類別的代碼示例。
export default function Home({ posts }) {
const [badgeCategories, setbadgeCategories] = useState([]);
useEffect(() => {
const fetchBadgeCatData = async () => {
const badgeCatResult = await api.getBadgeCategories();
setbadgeCategories(badgeCatResult.data);
};
fetchBadgeCatData();
}, [])
我試圖控制臺記錄badgeCategories 并注意到該陣列在第一次運行時最初是空的。
{console.log(badgeCategories)}
當代碼到達
{badgeCategories.map((g) => (
<div>
我收到一個錯誤說明
TypeError：badgeCategories.map 不是函式
我的假設是拋出錯誤是因為陣列最初顯示為空，因此它無法處理 .map 函式；但是我有點卡住了，還沒有解決這個問題。任何幫助將不勝感激，我相信這是我所缺少的簡單東西。
完整的地圖正文：
{badgeCategories.map((g) => (
<div>
<div className="pt-6 pb-4">
<h1 className="text-2xl font-extrabold leading-4 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-2xl md:leading-9">
{g.attributes}
</h1>
<p className="text-md text-gray-500 dark:text-gray-400">
{g.description}
</p>
</div>
<div className="container">
<div className="flex flex-wrap">
<ul className="w-full space-y-2">
{itemData.filter(item => item.group == g.id).map(filteredItem => (
<li key={filteredItem.order}>
<Item
type={filteredItem.type}
text={filteredItem.text}
color={filteredItem.color}
href={filteredItem.href}
hrefActive={filteredItem.hrefActive}
/>
</li>
))}
</ul>
</div>
</div>
</div>
))}
uj5u.com熱心網友回復：
你是正確的，陣列最初是空的。useState但是，當您在呼叫中為陣列設定初始值時，這不應引發錯誤：
const [badgeCategories, setbadgeCategories] = useState([]);
// here ^^
可能導致問題的實際上不是資料尚未加載，而是資料已經加載。根據您控制臺的螢屏截圖，新資料似乎不是陣列。
[] // before the data loads, `badgeCategories` is an empty array.
{ data: Array(2), meta: {...} } // after it loads, `badgeCategories` is an object
// containing a `data` property of an array.
這似乎來自這行代碼：
const badgeCatResult = await api.getBadgeCategories();
setbadgeCategories(badgeCatResult.data); // NOT an array!
看起來這badgeCatResult.data不是一個陣列，而是一個包含一個data陣列屬性的物件。嘗試改用這個：
const badgeCatResult = await api.getBadgeCategories();
setbadgeCategories(badgeCatResult.data.data); // This should work!
uj5u.com熱心網友回復：
您可以通過在呼叫 map 之前檢查 badgeCategories 是一個有效的陣列來簡單地避免錯誤
{Array.isArray(badgeCategories) && badgeCategories.map((g) => (
<div>
.....
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419542.html
標籤：