.harta nu este o funcție, atunci când preluarea de date de la API reactjs

0

Problema

Eu sunt, folosind un API pentru a prelua date. Când am consola.jurnalul meu de date, se prezinta ca o matrice. Dar când am încerca să-hartă pentru a obține date pentru a afișa, mi-a spus că .harta nu este o funcție. Am creat un obicei useFetch cârlig și apoi am importul într-o componentă separată. Aici e codul meu si un screenshot din consola.jurnal:

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

console.log info imagine

De ajutorul tau este apreciat foarte mult!

api arrays javascript map-function
2021-11-23 19:55:22
1

Cel mai bun răspuns

1

Aceste date nu este prezent da când încerci să faci pe hartă, astfel încât să faci:

  {data && data.prizes && data.prizes.map(prize => (
2021-11-23 20:25:42

Buna! Da, am încercat deja și era încă primesc aceeași eroare.
cjb

n-am văzut consola de jurnal, de date este de fapt un obiect și de date.premii-o matrice
Konflex

Ok, m-am gândit așa, dar consola.jurnal spunea matrice! Nu sunt încă sigur de modul de a extrage date de la obiect!
cjb

Încercați să hartă cu date.premii, ar trebui să fie, am editat mesajul meu
Konflex

Mulțumesc mult, aceasta a lucrat! Economizor de viata!!!
cjb

Acest lucru este pentru că ați defini inițial de date ca nul astfel încât acesta nu poate accesa datele.premii atunci când este nul, trebuie să verificați că datele nu este nulă de-a face harta
Konflex

De ce nu ar funcționa doar cu {date && de date.premii.harta(premiul => (? Vreau doar să înțeleg de ce adăugarea de date.premii în mijlocul lucrat!
cjb

Apreciez ajutorul tău, vă mulțumesc ATÂT de mult!
cjb

În alte limbi

Această pagină este în alte limbi

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................