.지도 함수가 아닌 경우에서 데이터를 가져 오 API reactjs

나는 API 를 사용하여 데이터를 가져올 수 있습니다. When I console.로그 내 데이터를,그것으로 보여줍니다. 하지만하려고 할 때도 그것을 통해 데이터를 얻을 표시하는.지도 기능은 없습니다. 만든 사용자 지정 useFetch 훅 그리고 나는 그것을 가져오기로 별도의 구성 요소입니다. 여기 나의 코드고의 스크린 샷 console.로그:

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

console.로그인

console.로그 정보 이미지

당신의 도움은 대단히 감사합니다!