.API reactjs'den veri alınırken map bir işlev değildir

Veri almak için bir API kullanıyorum. Teselli ettiğimde.verilerimi günlüğe kaydet, bir dizi olarak gösterir. Ama verileri görüntülemek için haritalandırmaya çalıştığımda, bana bunu söylüyor .harita bir işlev değildir. Özel bir useFetch kancası oluşturdum ve sonra onu ayrı bir bileşene aktarıyorum. İşte kodum ve konsolun ekran görüntüsü.günlük:

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

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

konsol.günlük

konsol.günlük bilgisi resmi

Yardımlarınız büyük beğeni topluyor!