.地图是不是一个函数时,获取数据,从API reactjs

0

的问题

我使用来获取数据。 当我控制台。日志我的数据,它表示,作为一个阵列。 但是当我尝试图通过它得到的数据显示,它告诉我的。地图是不是一个功能。 我创建了一个自定义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

控制台。日志

控制台。登录信息的图像

你的帮助是非常感谢!

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

最好的答案

1

这个数据是不存在是的,当你尝试做地图这样做:

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

你好! 是的,我想这已经并仍然获得同样的错误。
cjb

我没有看到控制台日志,数据被实际对象和数据。奖品阵列
Konflex

好吧,我想这样但是控制台。日志是说阵! 我还不确定如何从中提取数据的对象!
cjb

试图用数据。奖品,它应该是,我编的我的消息
Konflex

哦太感谢你了这工作! 生命的救星!!!
cjb

这是因为你定义的最初的数据为空,所以它不能访问的数据。奖品时,它是空的,你需要检查的数据不null做到的地图
Konflex

怎么不起作用只是{数据和数据。奖品。地图(奖=>(? 只是想要真正了解为什么加入的数据。奖品中的工作!
cjb

我真的很感谢你的帮助,太谢谢你了!
cjb

其他语言

此页面有其他语言版本

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