.แผนที่ไม่ใช่ฟังก์ชันตอนที่กำลังทำการดึงข้อมูลข้อมูลจากรูปแบบ api reactjs

ฉันกำลังใช้เป็นรูปแบบ api ต้องดึงข้อมูลออกมา ตอนที่ฉันคอนโซล.ปูมบันทึกข้อมูลของฉันมันแสดงเป็นอาเรย์. แต่ตอนที่ฉันพยายามแผนที่มันจะไปเอาข้อมูลการแสดง,มันบอกฉันเรื่องนั้นแผนที่ไม่ใช่ฟังก์ชั่น. ฉันสร้างกำหนดเอง useFetch ยื่อและจากนั้นฉันกำลังนำเข้ามันให้เป็นแยกส่วนประกอบ. นี่คือรหัสของฉันและเป็นภาพหน้าจอที่จับได้ของคอนโซล.ปูมบันทึก:

useFetch.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

List.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

คอนโซล.ปูมบันทึก

คอนโซล.ปูมบันทึกข้อมูลภาพ

ขอความช่วยเหลือ greatly รู้สึกขอบคุณ!