React中如何访问嵌套对象，显示JSON数据里的logo图片

这是我在Stack Overflow的第一篇帖子，请多包涵。我正在构建一个React应用，想要从对象数组中显示图片，但其中的"images"对象包含两个子对象，示例数据如下：

[
  { value: "all", label: "All sets" },
  {
    value: "base1",
    label: "Base",
    series: "Base",
    printedTotal: 102,
    total: 102,
    legalities: { unlimited: "Legal" },
    ptcgoCode: "BS",
    releaseDate: "1999/01/09",
    updatedAt: "2020/08/14 09:35:00",
    images: {
      symbol: "https://images.pokemontcg.io/base1/symbol.png",
      logo: "https://images.pokemontcg.io/base1/logo.png",
    },
  },
]

我的问题是如何访问内部对象以仅显示"logo"对应的图片？我猜测可以结合使用.map和Object.keys()，但不确定具体实现方式。我的代码如下：

import React from "react";
import setOptions from "../data/sets";

export default function SetOverview() {
  const sets = setOptions;

  return (
    <div>
      {sets.map((set) => {
        return (
          <div key={set.value}>
            <h2>{set.label}</h2>;<p>Number of cards: {set.printedTotal}</p>
            <p>Release date: {set.releaseDate}</p>
          </div>

        //   image to be placed here 
        );
      })}
    </div>
  );

解决方案 #

不需要用到Object.keys()，因为你明确要获取的是images对象下的logo属性，直接通过点语法访问即可。另外注意数组里第一个元素（value: "all"）没有images属性，必须做判空处理，避免渲染时抛出错误。

修改后的完整代码如下：

import React from "react";
import setOptions from "../data/sets";

export default function SetOverview() {
  const sets = setOptions;

  return (
    <div>
      {sets.map((set) => {
        return (
          <div key={set.value}>
            <h2>{set.label}</h2>
            {set.printedTotal && <p>Number of cards: {set.printedTotal}</p>}
            {set.releaseDate && <p>Release date: {set.releaseDate}</p>}
            {/* 判空后渲染logo图片 */}
            {set.images?.logo && (
              <img 
                src={set.images.logo} 
                alt={`${set.label} logo`}
                // 可根据需求添加样式
                style={{ width: '150px', height: 'auto' }}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}

关键说明： #

• 用set.images?.logo的可选链操作符（ES2020+语法），确保当set.images不存在时不会报错；如果项目不支持可选链，也可以写成set.images && set.images.logo。
• 给img标签添加alt属性，提升可访问性，这里用set.label拼接作为替代文本。
• 同时给printedTotal和releaseDate也加了判空，避免第一个元素（All sets）因为没有这些属性而显示空内容。

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