我目前正在構建從 axios api 呼叫接收影像的卡片庫視圖。
我在 useffect 掛鉤中進行呼叫，然后將結果物件傳遞給 useState 進行存盤。
然后我使用 urls.map 訪問存盤物件的內容，但出現以下錯誤 -->
未捕獲的型別錯誤：urls.map 不是函式
最終目標是能夠將陣列物件（路徑 data.nfts.media[0].uri）中的 url 傳遞給帶有 props 的 NFTCard 組件。經過測驗的道具，他們正在作業。
這是我試圖過濾的物件
import axios from "axios";
import React, { useEffect, useState } from "react";
import NFTCard from "./NFTCard";
function ViewNFT() {
const api_key = "witheld for privacy";
const address = "witheld for privacy";
const [urls,setUrls] = useState([])
useEffect(() => {
axios
.get(
`https://flow-testnet.g.alchemy.com/v2/${api_key}/getNFTs/?owner=${address}&offset=0&limit=10`
)
.then(res=> {
setUrls(...res.data.nfts);
console.log(res.data.nfts);
})
.catch(err=> {
console.log(err);
})
},[]);
return (
<>
{urls.map((url,id)=>{
return <div key={id}>
<NFTCard pharaoh_url={url} />
</div>
})}
</>
);
}
export default ViewNFT;uj5u.com熱心網友回復：
回傳的 set 函式（setUrls在本例中）useState接受單個引數 - 值或函式。當您傳播從 獲得的陣列時api，唯一存盤的專案是第一個物件，并且由于它不是陣列，因此沒有該Array.map()方法。
從此行中洗掉傳播引數 -setUrls(...res.data.nfts);
所以它將存盤整個陣列 - setUrls(res.data.nfts);.
如果您想制作 api 回傳的陣列的淺表副本（除非在多個狀態下使用，否則是冗余的），傳播到一個新陣列中 -setUrls([...res.data.nfts]);
uj5u.com熱心網友回復：
試試這個
return (
<>
{urls && urls.length && urls.map((url,id)=>{
return <div key={id}>
<NFTCard pharaoh_url={url} />
</div>
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/515656.html
上一篇：更新陣列中的物件