React使用自定义useFetch钩子调用API时报.map is not a function错误

问题根因 #

• 初始渲染时，data的默认值为null，此时接口请求尚未完成，直接调用null.map必然会抛出方法不存在的报错
• 你调用的诺贝尔奖公开API返回的根结构是对象，目标数组存储在返回值的prizes字段中，你直接将整个返回对象赋值给data，对象本身不存在数组的map方法

为什么console.log显示为数组？ #

console.log打印引用类型时展示的是最终值，你看到打印结果时接口已经请求完成、data已经被赋值为返回的对象，只是你点开后看到的是里面的prizes数组，忽略了外层的对象结构。

修复方案 #

优先处理加载、错误、空值判断，再取正确的字段遍历即可，修改后的组件代码如下：

import React from 'react'
import useFetch from './useFetch'

function PrizeList2017() {
    // 取出useFetch返回的加载状态和错误信息
    const { data, isLoading, error } = useFetch('http://api.nobelprize.org/v1/prize.json?year=2017&yearTo=2017')

    // 前置处理边界状态，避免后续逻辑异常
    if (isLoading) return <div>数据加载中</div>
    if (error) return <div>加载失败：{error}</div>
    if (!data?.prizes?.length) return <div>暂无获奖数据</div>

    return (
        <div className="prize-list-2017-container">
            <h1>2017</h1>
            {/* 取返回对象里的prizes数组遍历 */}
            {data.prizes.map(prize => (
                <div key={prize.id}>
                    <h2>{prize.category}</h2>
                </div>
            ))}
        </div>
    )
}

export default PrizeList2017

也可以选择直接在useFetch里调整赋值逻辑，后续组件就可以直接调用data.map：

// useFetch.js中修改then回调的赋值逻辑
.then(responseData => {
    setData(responseData.prizes)
    setIsLoading(false)
    setError(null)
})

内容的提问来源于stack exchange，提问作者cjb