React中通过API加载图片无法显示的问题求助

问题根源分析 #

1. 遍历逻辑错误：原HotelImage组件中，image状态被设置为单个图片的ObjectURL字符串，却尝试用map方法遍历，直接触发map is not a function错误。
2. 数据传递断层：父组件调用图片组件时，未将当前酒店对应的images数据传递给子组件，子组件硬编码固定URL，无法关联对应酒店的图片。
3. 冗余的Blob转换：通过fetch获取图片转Blob再生成ObjectURL完全没必要，img标签可直接加载图片URL，此操作额外增加请求开销，还可能引发跨域问题。
4. 组件命名不匹配：父组件调用<Image />，但子组件导出的是HotelImage，导致组件无法正确渲染。

修复后的代码实现 #

父组件（修正数据传递与组件调用）

return (
    <div>
      {hotel.map((data) => {
        return (
          <div className="list-group-item hotel-area" key={data.id}>
            <div>{data.name}</div>
            <div>
              {/* 传递当前酒店的images数据，并修正组件名称 */}
              <HotelImage images={data.images} />
            </div>
            <div>{data.address1}</div>
            <div>{data.address2}</div>
            <div className="star-rating">{data.starRating}</div>
          </div>
        );
      })}
    </div>
  );

子组件（简化逻辑，直接渲染图片）

import React from "react";

const HotelImage = ({ images }) => {
  // 无图片时返回占位提示
  if (!images || images.length === 0) {
    return <div>暂无图片</div>;
  }

  return (
    <div className="list-group-item hotel-area">
      {images.map((imgItem, index) => (
        <img 
          key={index}
          src={imgItem.url} 
          alt={`酒店图片${index + 1}`}
          style={{ maxWidth: '100%', margin: '5px 0' }}
        />
      ))}
    </div>
  );
};

export default HotelImage;

修复说明 #

• 移除了子组件中不必要的useState、useEffect和fetch逻辑，直接使用API返回的图片URL，减少请求复杂度。
• 通过props实现父子组件的数据传递，确保每个酒店展示自身对应的图片。
• 添加了无图片时的占位提示，优化用户体验。
• 修正组件命名不匹配问题，保证组件正常渲染。

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