.नक्शा एक समारोह में नहीं है जब डेटा दिलकश से एपीआई reactjs

मैं का उपयोग कर रहा हूँ एक एपीआई डेटा लाने के लिए. जब मैं console.लॉग अपने डेटा, यह एक सरणी के रूप में. लेकिन जब मैं करने की कोशिश मानचित्र पर इसे प्राप्त करने के लिए डेटा प्रदर्शित करने के लिए, यह है कि मुझसे कहता है .नक्शा एक समारोह में नहीं है. मैं बनाया एक कस्टम 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

console.लॉग इन करें

console.लॉग जानकारी छवि

आपकी मदद काफी सराहना की है!