React中如何遍历对象内部嵌套的数组，渲染Flickr接口返回的图片

问题原因 #

你代码的错误核心是数组遍历后的属性访问路径错误，加上几个可优化的问题如下：

• 遍历逻辑路径错误：你已经通过data.photos.photo获取到了所有照片组成的数组，map遍历的每一项imgdata就是单张照片的独立对象，不需要再额外加photos.photo前缀，直接访问imgdata.id/imgdata.secret即可，原写法访问了不存在的嵌套属性，才会触发Cannot read property 'photo' of undefined报错。
• useEffect缺少空依赖数组：当前写法会在组件每次渲染后重复发起接口请求，造成无限循环，添加[]作为useEffect的第二个参数，即可让请求仅在组件首次挂载时触发一次。
• 图片链接写死server值：不同照片的server字段可能不同，写死65535会导致部分图片加载失败，需要用接口返回的server字段拼接链接。
• 列表渲染缺少key属性：React遍历渲染列表时需要指定唯一key，否则会触发控制台警告。

修复后可运行代码 #

import "./App.css";
import React, { useEffect, useState } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

function App() {
  // 语义化修改变量名，原来的variable可读性太差
  const [imgList, setImgList] = useState([]);

  useEffect(() => {
    fetch(
      "https://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=09d770a1c3e5e480517dff043f458023&format=json&nojsoncallback=1&auth_token=72157719623454163-39de62921689545c&api_sig=faf58b987d668d8b3cf264807a687c9b"
    )
      .then((response) => response.json())
      .then((data) => {
        // 修复遍历属性路径
        const processedImgList = data.photos.photo.map((imgdata) => ({
          id: imgdata.id,
          secret: imgdata.secret,
          title: imgdata.title,
          server: imgdata.server // 新增server字段用于拼接图片链接
        }));
        setImgList(processedImgList);
      })
      .catch(err => console.log("接口请求错误：", err)); // 新增错误捕获避免控制台报错
  }, []); // 新增空依赖数组，仅挂载时请求一次

  return (
    <div className="App">
      <h1>Testing Here</h1>
      {imgList.map((img) => (
        // 新增唯一key属性，加了简单样式避免卡片堆叠
        <div className="card" key={img.id} style={{ width: "18rem", display: "inline-block", margin: "10px" }}>
          {/* 修复链接拼接逻辑，用返回的server字段 */}
          <img
            src={`https://live.staticflickr.com/${img.server}/${img.id}_${img.secret}_w.jpg`}
            className="card-img-top"
            alt={img.title}
          />
          <div className="card-body">
            <h5 className="card-title">{img.title}</h5>
          </div>
        </div>
      ))}
    </div>
  );
}

export default App;

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