React中使用.map渲染GET请求获取的图片失败问题

核心问题分析 #

1. 数组嵌套错误：你把状态数组ruta额外包裹进了imageNames = [ruta]，形成了二维数组。map遍历外层数组时，每个元素是完整的路径数组而非单个路径字符串，导致生成的图片URL格式错误（比如变成.../Imagenes/[path1,path2]），无法加载图片。
2. 定时器清理错误：useEffect的清理函数误用setInterval(interval)，这会重新创建定时器而非清除它，导致请求持续重复，浪费资源。

修复后的代码 #

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [ruta, setRuta1] = useState([]);

  const peticionGet_imagenes1 = async () => {
    try {
      const res = await axios.get(`https://aliraweb.com/apiAliraweb/anuncios_img/index1.php`);
      setRuta1(res.data.ruta);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    const interval = setInterval(() => {
      peticionGet_imagenes1();
    }, 1000);

    // 修正清理逻辑，正确清除定时器
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h2>Galería de imágenes</h2>
      <div className="image-container">
        {/* 直接遍历状态数组，每个元素为单个图片路径 */}
        {ruta.map((imagePath, index) => (
          <img
            key={index}
            style={{ width: "100%" }}
            src={`https://aliraweb.com/apiAliraweb/fotos_anuncios/Imagenes/${imagePath}`}
            alt={`Imagen ${index}`} // 新增alt属性，优化可访问性
          />
        ))}
      </div>
    </div>
  );
}

export default App;

关键修改说明 #

• 移除冗余的imageNames变量，直接使用ruta.map遍历单个路径字符串。
• 将await与then的混合写法改为try/catch，代码更简洁易读。
• 修正定时器清理逻辑，确保组件卸载时停止重复请求。
• 添加alt属性，符合Web可访问性规范。

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