我正在使用 react 和 redux-toolkit 構建一個加密應用程式。我正在嘗試找到一種方法來管理來自 API 的資料。更具體地說，我希望能夠按價值、數量等進行排序，并為每個硬幣添加一個“isFavourite”屬性，但我認為（如果我錯了，請糾正我）唯一的方法是復制資料到另一個狀態。到目前為止，我嘗試的是添加另一個狀態，在該狀態下我傳遞這樣的資料：
const [list, setList] = useState()
useEffect(() => {
setList(data)
}, [data])
//"const coinData = list?.data?.coins" instead of "const coinData = data?.data?.coins"
但隨后發生錯誤，因為“串列”上的資料是“未定義的”。下面的代碼是運行沒有任何問題的代碼。如何管理 API 資料？我是在正確的道路上還是有更巧妙的方式來做我想做的事？謝謝！
function Main () {
const { data, error, isFetching } = useGetCryptosQuery()
if(isFetching) return 'Loading...'
const globalStats = data?.data?.stats
const coinData = data?.data?.coins
const coinList = coinData.map(coin => {
return (
<Coin
price = {coin.price}
key = {coin.uuid}
id = {coin.uuid}
name = {coin.name}
icon = {coin.iconUrl}
/>)
})
return (
<div>
<h2>Main</h2>
{coinList}
</div>
)
}
export default Main
uj5u.com熱心網友回復：
你在正確的軌道上 - 我設定了類似的東西并添加了一個檢查 null 試圖映射資料，這避免了你可能遇到的錯誤。
const coinList = coinData ? coinData.map((coin) => {
///...coin component
}) : <div></div>;
然后，它將回傳一個空的 div，而不是未定義資料的錯誤 - 直到資料在那里，然后它會呈現 ok。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/451558.html