如何在React中从NASA Images API解构所需信息

我正在用NASA Images API构建React图片画廊，已经成功获取到图片和nasa_id，但在解构标题（title）和描述（description）时遇到了麻烦。因为接触API经验不多，我不熟悉这个API的响应格式，尤其是像"AVAIL:Description"这种带冒号的键名，完全不知道怎么处理。我查过API的其他端点，没找到能获取图片全部信息的替代方案。

核心问题：带特殊字符的键解构 #

对于包含冒号这类特殊字符的对象键名，不能直接用常规的点语法或连续解构语法，必须用方括号包裹键名的方式来访问和解构。

修正后的代码 #

import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import api from "../utils/api";
import Preloader from "./Preloader";

export default function Details({ isLoaded }) {
  const { nasa_id } = useParams();
  const [image, setImage] = useState({});
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");

  useEffect(() => {
    api
      .getImage(nasa_id)
      .then(({ collection: { items: item } }) => {
        setImage(item[0]);
      })
      .catch((err) => console.error(err));
  }, [nasa_id]);

  useEffect(() => {
    api
      .getDetails(nasa_id)
      .then((response) => {
        // 用方括号包裹带特殊字符的键名完成解构
        const { 
          Collection: { 
            Title: imgTitle, 
            ["AVAIL:Description"]: imgDescription 
          } 
        } = response;
        setTitle(imgTitle);
        setDescription(imgDescription);
        console.log(imgTitle, imgDescription);
      })
      .catch((err) => console.error(err));
  }, [nasa_id]);

  return (
    <article className="details">
      {!isLoaded ? <Preloader /> : (
        <img
          className="details__image"
          src={image.href}
          alt={title || "NASA Image"}
        />
      )}
      <h2 className="details__title">Title: {title}</h2>
      <p className="details__subtitle">NASA ID: {nasa_id}</p>
      <p className="details__info">Description: {description}</p>
      <nav>
        <Link to="/" className="details__info link">
          Home
        </Link>
      </nav>
    </article>
  );
}

额外优化点 #

• 将image初始状态从数组改为对象，匹配单张图片的实际数据结构
• 给useEffect添加nasa_id依赖项，确保参数变化时重新请求数据
• 调整预加载器渲染逻辑，避免在img的src属性中传入React组件
• 补充图片alt文本，提升页面可访问性

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