我正在從 API 獲取資料并呈現結果。這作業了一段時間&然后我收到以下錯誤：itemList.js:23 Uncaught TypeError: items.map is not a function&也Consider adding an error boundary to your tree to customize error handling behavior.
關于為什么會發生這種情況的任何想法？
這是我的代碼示例：
import React, { useEffect, useState } from "react";
const ItemList = () => {
const [items, setItem] = useState("");
useEffect(() => {
const url = "<redacted-api-endpoint>";
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
return setItem(json.data);
} catch (error) {
console.log("error", error);
}
};
fetchData();
}, []);
return (
<>
{
items.map((item, index) => {
const { name, title, description, image, price } = item;
return (
<div key={index}>
<img src={image} alt="item" width="100" height="auto" />
<p>{name}</p>
<p>{title}</p>
<p>{description}</p>
<p>{price}</p>
</div>
)
})
}
</>
);
};
export default ItemList;
uj5u.com熱心網友回復：
useEffect(callback, dependencies)用于在組件安裝后運行的副作用掛鉤，它管理功能組件中的副作用。回呼引數是一個放置副作用邏輯的函式。依賴項是副作用的依賴項串列：作為道具或狀態值。如果依賴項中的任何值已更改，則在初始安裝后以及以后的渲染中useEffect(callback, dependencies)呼叫回呼。
在您的第一個/初始渲染中，組件以其初始狀態安裝，const [items, setItem] = useState("");并且您正在映射一個空字串。
解決方案：
考慮添加短路，或在初始狀態添加專案以防止錯誤。
<>
{
items && items.map((item, index) => {
const { name, title, description, image, price } = item;
return (
<div key={index}>
<img src={image} alt="item" width="100" height="auto" />
<p>{name}</p>
<p>{title}</p>
<p>{description}</p>
<p>{price}</p>
</div>
)
})
}
</>
快速查看有關useEffect掛鉤的官方反應檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466116.html
標籤：javascript 数组 反应 异步 拿来
上一篇：如何將輸入的值系結到反應中的鏈接