React项目API数据映射问题：浏览器无法显示数据求助

问题排查与修复步骤 #

1. 修正异步请求逻辑并添加错误捕获
   原代码混合了async/await和.then()写法，逻辑混乱且无错误处理，API请求失败时无法定位问题。改用纯async/await并加入try/catch捕获异常。

2. 匹配API数据结构与初始状态
   你将offer初始化为数组，但如果API返回的是单个对象（比如根节点是{ payload: [...] }），直接调用offer.map会报错。需将初始状态改为null或空对象，适配API返回结构。

3. 修复嵌套map语法错误
   原代码中item.payload.map外层多余的大括号会导致无返回值，要么去掉大括号，要么显式添加return。

4. 添加加载/错误状态处理
   初始加载时显示加载提示，请求失败或无数据时给出对应提示，避免页面空白。

5. 验证环境变量配置
   确认.env文件中REACT_APP_BASEURL确实指向http://192.168.1.175:5000/api/home，且修改环境变量后重启了React项目。

修正后的完整代码 #

import React, { useEffect, useState } from "react";
import "../css/Section.css";

const OfferSection = () => {
    const [offer, setOffer] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchOfferData = async () => {
            try {
                const response = await fetch(process.env.REACT_APP_BASEURL);
                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}`);
                }
                const data = await response.json();
                setOffer(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        fetchOfferData();
    }, []);

    if (loading) return <div>加载中...</div>;
    if (error) return <div>加载失败：{error}</div>;
    if (!offer?.payload?.length) return <div>暂无数据</div>;

    return (
        <div>
            {offer.payload.map((ip, index) => {
                const section2Data = ip.data?.section2?.data?.[0];
                if (!section2Data?.image) return null;
                
                return <img key={index} src={section2Data.image} alt="优惠图片" />;
            })}
        </div>
    );
};

export default OfferSection;

额外验证步骤 #

• 打开浏览器开发者工具（F12）切换到Network标签，刷新页面查看接口请求：
  • 若请求失败，检查状态码、API服务是否正常，或是否存在跨域问题（需后端配置CORS）。
  • 若请求成功，核对返回的JSON结构，确保代码中ip.data.section2.data[0].image的路径完全匹配。
• 检查图片src是否为可访问路径，若为相对路径，需拼接API基础地址，比如：src={${process.env.REACT_APP_BASEURL}/${section2Data.image}}

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