如何从Axios GET请求中提取指定的图片href数据？

我想要获取每张图片对应的href字段（即以下API返回数据中目标位置的href）：

{
  "collection": {
    "href": "https://images-api.nasa.gov/search?q=moon",
    "version": "1.0",
    "items": [
      {
        "href": "https://images-assets.nasa.gov/image/PIA12235/collection.json",
        "data": [ ... ],
        "links": [
          {
            "href": "https://images-assets.nasa.gov/image/PIA12235/PIA12235~thumb.jpg", // 目标图片href
            "render": "image",
            "rel": "preview"
          }
        ]
      }
    ]
  }
}

以下是我的代码，每当尝试进一步获取Axios请求返回的数据时，所有内容都显示undefined，不清楚为什么无法通过map遍历每个链接：

const { useState, useEffect } = React;

const Api = () => {
    const api = "https://images-api.nasa.gov/search?q=moon";
    const [list, setList] = useState([null]);

    useEffect(() => {
        axios.get(api).then((res) => {
            setList(res.data.collection.items.map((item) => item.links));
        });
    }, [api]);

    if (list) {
        return (
            <div>
                <p>{console.log(list)}</p>
            </div>
        );
    }
};

const Example = () => {
    return <Api />;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/axios@1.1.3/dist/axios.min.js"></script>

问题原因分析 #

1. 初始list状态设为[null]，导致组件一开始就认为有数据，但此时API请求还未完成；且后续map(item => item.links)得到的是数组套数组的结构（每个item.links本身是数组），直接遍历会出现问题。
2. 没有处理数据加载状态，也未考虑部分item可能不存在links的情况，容易触发undefined错误。
3. 代码仅打印list，未实际遍历提取目标href。

修复后的代码 #

const { useState, useEffect } = React;

const Api = () => {
    const api = "https://images-api.nasa.gov/search?q=moon";
    // 初始化为空数组，更准确表示无数据状态
    const [imageHrefs, setImageHrefs] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios.get(api)
            .then((res) => {
                // 提取所有图片的href：先遍历items，再遍历每个item的links，取出href
                const hrefs = res.data.collection.items.flatMap(item => {
                    // 处理item无links的情况，避免报错
                    return item.links ? item.links.map(link => link.href) : [];
                });
                setImageHrefs(hrefs);
            })
            .catch(err => console.error('请求失败:', err))
            .finally(() => setLoading(false));
    }, [api]);

    // 加载状态提示
    if (loading) {
        return <div>加载中...</div>;
    }

    // 展示所有图片href或提示无数据
    return (
        <div>
            <h3>图片链接列表</h3>
            {imageHrefs.length === 0 ? (
                <p>未找到图片链接</p>
            ) : (
                <ul>
                    {imageHrefs.map((href, index) => (
                        <li key={index}>{href}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

const Example = () => {
    return <Api />;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

关键修复点 #

• 使用flatMap+map组合，正确从嵌套结构中提取所有图片href，同时处理item.links不存在的边界情况。
• 添加loading状态，在请求未完成时展示加载提示，避免用户看到空白或错误内容。
• 初始化状态改为空数组，符合数据逻辑，后续遍历更安全。
• 增加错误捕获，便于排查请求失败问题。

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