React调用NASA API时fetch返回数据仅可遍历一个嵌套对象的原因

报错原因 #

NASA图像搜索API返回的collection.items数组中，所有条目都带有必填的data元数据数组字段，所以可以直接调用data.data.map遍历。但部分非可视化资源条目（如纯元数据记录、音频类资源）不存在同层级的links字段，此时data.links为undefined，不存在map方法，所以调用后会抛出错误。

修复代码 #

只需要在遍历links字段前增加存在性校验即可，推荐用ES6可选链简化写法，同时注意遍历子项添加唯一key属性、避免变量名重复冲突：

import React from 'react'

const NasaImages = ({ nasaData }) => {
    console.log(nasaData)

    return (
        <div>
            <h2>This is a where the data go. 👇</h2>
            {
                nasaData && nasaData.map((item, idx) => {
                    return (
                        <div key={idx}>
                            <p>{item.href}</p>
                            <div>
                                {/* 新增可选链校验links存在才执行map */}
                                {item.links?.map((linkItem, linkIdx) => {
                                    return <p key={linkIdx}>{linkItem.href}</p>
                                })}
                                {item.data.map((dataItem, dataIdx) => {
                                    return <p key={dataIdx}>{dataItem.description}</p>
                                })}
                            </div>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default NasaImages

如果需要兼容不支持可选链的运行环境，可以替换为传统判断写法：

{item.links && Array.isArray(item.links) && item.links.map((linkItem, linkIdx) => {
  return <p key={linkIdx}>{linkItem.href}</p>
})}

额外优化点 #

父组件中fetchData方法的finally回调写法存在问题，当前写法会在方法执行时直接触发setLoading(false)，而非请求结束后触发，修改为函数包裹即可：

.finally(() => setLoading(false))

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