我正在使用 API 來獲取資料。當我 console.log 我的資料時，它顯示為一個陣列。但是當我嘗試對其進行映射以顯示資料時，它告訴我 .map 不是一個函式。我創建了一個自定義的 useFetch 鉤子，然后我將它匯入到一個單獨的組件中。這是我的代碼和 console.log 的螢屏截圖：
使用Fetch.js
import { useEffect, useState } from 'react'
function useFetch(url) {
const [data, setData] = useState(null)
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState(null)
useEffect(() => {
fetch(url)
.then(response => {
if (!response.ok) {
throw Error("Sorry, couldn't fetch data for this resource!")
}
return response.json()
})
.then(responseData => {
setData(responseData)
setIsLoading(false)
setError(null)
})
.catch(error => {
setIsLoading(false)
setError(error.message)
})
}, [url])
return { data, isLoading, error }
}
export default useFetch
串列.js
import React from 'react'
import useFetch from './useFetch'
function PrizeList2017() {
const { data } = useFetch('http://api.nobelprize.org/v1/prize.json?year=2017&yearTo=2017')
return (
<div className="prize-list-2017-container">
<h1>2017</h1>
{data.map(prize => (
<div key={prize.id}>
<h2>{prize.category}</h2>
</div>
))}
{console.log(data)}
</div>
)
}
export default PrizeList2017
控制臺日志
console.log 資訊影像
非常感謝您的幫助！
uj5u.com熱心網友回復：
當您嘗試制作地圖時，此資料不存在是的，因此請執行以下操作：
{data && data.prizes && data.prizes.map(prize => (
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/364579.html
標籤：javascript 数组 反应 接口 映射函数