React+Axios调用NASA图片API出现TypeError报错求助

问题说明 #

已查阅相关问题但未解决，需求是从NASA图片API获取并展示图片，API的JSON层级为：Collection {object} > Items [array] > {object} > links [array] > {object} > href（图片URL）。运行代码时控制台触发上述报错，报错位置在DataFetching.js第16行。

报错信息 #

TypeError: Cannot read properties of undefined (reading '0')

原代码示例 #

import React, {useState, useEffect} from "react";
import axios from "axios";

function DataFetching(){
    const [galaxies, setGalaxies] = useState();
    const [id, setId] = useState('apollo')
    const [idFromButtonClick, setIdFromButtonClick] = useState('apollo')

const handleClick = () => {
    setIdFromButtonClick(id)
}

useEffect(() => {
    axios.get(`https://images-api.nasa.gov/search?q=${idFromButtonClick}`)
        .then(res => {
            console.log(res.data.collection.items.links[0].id)
            setGalaxies(res.data.collection.items.links[0].id)
        })
        .catch(err => {
            console.log(err)
        })
}, [idFromButtonClick])

return (
    <div>
        <input type="text" value={id} onChange={e => setId(e.target.value)} />
        <button type="button" onClick={handleClick}>Fetch</button>
        <br />

        {galaxies?.map(galaxies => <div key={galaxies.id}>
            <img src={galaxies?.href} alt="" />
        </div>)}
    </div>
)
}

export default DataFetching

问题排查与解决 #

1. 核心错误原因 #

• API层级访问错误：res.data.collection.items是数组类型，原代码直接访问items.links会返回undefined，后续读取[0]自然触发报错。正确逻辑是遍历items数组中的每个对象，再访问对象内的links数组。
• 数据处理逻辑错误：原代码试图直接提取单条数据，但后续又用map遍历，状态初始化也未设为数组，导致逻辑矛盾。

2. 修正后的代码 #

import React, { useState, useEffect } from "react";
import axios from "axios";

function DataFetching() {
  // 初始化状态为数组，避免map遍历出错
  const [galaxies, setGalaxies] = useState([]);
  const [searchTerm, setSearchTerm] = useState("apollo");
  const [searchTrigger, setSearchTrigger] = useState("apollo");

  const handleClick = () => {
    setSearchTrigger(searchTerm);
  };

  useEffect(() => {
    axios.get(`https://images-api.nasa.gov/search?q=${searchTrigger}`)
      .then((res) => {
        // 遍历items数组，过滤出包含有效链接的条目，提取图片信息
        const imageData = res.data.collection.items
          .filter(item => item.links && item.links.length > 0)
          .map(item => ({
            id: item.data[0].nasa_id,
            href: item.links[0].href
          }));
        setGalaxies(imageData);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [searchTrigger]);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="输入搜索关键词"
      />
      <button type="button" onClick={handleClick}>获取图片</button>
      <br />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "1rem", marginTop: "1rem" }}>
        {galaxies.map((galaxy) => (
          <div key={galaxy.id}>
            <img src={galaxy.href} alt={galaxy.id} style={{ width: "100%", height: "auto" }} />
          </div>
        ))}
      </div>
    </div>
  );
}

export default DataFetching;

关键修正点 #

• 修正API层级访问：遍历items数组中的每个对象，访问item.links而非items.links
• 状态初始化改为数组：确保map方法可正常调用
• 增加数据校验：用filter过滤无有效链接的条目，避免访问undefined属性
• 合理提取唯一标识：从item.data[0].nasa_id获取唯一ID，作为map的key

内容的提问来源于stack exchange，提问作者R-b-n