求助：Flickr API请求res打印两次且图片无法渲染问题

原代码存在的核心问题 #

• 未用React状态管理数据：用普通变量photos存储数据，更新后不会触发组件重渲染，页面无法感知数据变化。
• 请求未受控执行：直接在组件函数内调用fetch，组件每次渲染（包括Strict Mode下的两次渲染）都会发起请求，导致重复调用。
• 列表渲染未返回元素：map函数里仅定义了图片URL，但没有返回img标签，相当于没渲染任何内容。
• 错误处理远程图片：远程图片URL不需要用require()，直接赋值给src即可。

修复后的完整代码 #

import { useState, useEffect } from 'react';

const DisplayImages = () => {
    const [photos, setPhotos] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch(
            `https://www.flickr.com/services/rest/?method=flickr.galleries.getPhotos&api_key=***********************&gallery_id=************&format=json&nojsoncallback=1`
        )
        .then((response) => {
            if (!response.ok) {
                throw new Error('请求图片数据失败');
            }
            return response.json();
        })
        .then((res) => {
            setPhotos(res.photos.photo);
            setLoading(false);
        })
        .catch((err) => {
            setError(err.message);
            setLoading(false);
        });
    }, []); // 空依赖数组确保组件挂载时仅执行一次请求

    if (loading) return <div>加载图片中...</div>;
    if (error) return <div>加载出错：{error}</div>;

    return (
        <div className="imagescontainer">
            {photos.map((photo) => {
                // 补充.jpg后缀，Flickr图片需要指定格式才能正常访问
                const imgUrl = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}.jpg`;
                return <img key={photo.id} src={imgUrl} alt={photo.title || 'Flickr图片'} />;
            })}
        </div>
    );
};

export default DisplayImages;

关键修复说明 #

1. 状态管理：用useState定义photos存储图片数据，更新状态时自动触发组件重渲染，展示最新数据。
2. 受控请求：把fetch放在useEffect中，空依赖数组保证请求只在组件首次挂载时执行一次，解决重复调用问题。
3. 正确渲染列表：map函数返回img元素，同时添加key属性（用图片唯一ID），符合React列表渲染规范。
4. 图片URL修正：给Flickr图片URL添加.jpg后缀，确保图片能正常加载；移除不必要的require()。
5. 状态提示：添加加载中和错误状态提示，提升页面交互体验。

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