图像仅渲染一次，即使它是从应该返回 50 次的循环中返回的答案

【问题标题】：The image is rendered only once even though it is returned from a loop which is supposed to return it 50 times图像仅渲染一次，即使它是从应该返回 50 次的循环中返回的
【发布时间】：2019-04-29 08:12:35
【问题描述】：

我正在尝试在 react 组件中使用 for 循环来渲染图像，但循环无法按预期工作。当我调用应该渲染相同图像 50 次并在屏幕上显示 50 个图像的函数时，图片仅渲染一次

import React from 'react';
import dipesh from '../../dipesh.jpg';

export default function Tshirt() { 
    let renderTshirt = () => { 
        for(let i=0; i < 50; i++) {
            return( <img src={dipesh} alt="pic"/> )
        }
    }
    return ( <div> {renderTshirt()} </div> )
}

【问题讨论】：

发布您的代码，以获得更多说明
请发布相关的sn-p
import React from 'react'; import dipesh from '../../dipesh.jpg'; export default function Tshirt() { let renderTshirt = () => { for(let i=0;i<50;i++){ return( <img src={dipesh} alt="pic"/> ) } } return ( <div> {renderTshirt()} </div> ) }
你可以用地图代替
但我试图多次渲染同一张图像...地图如何帮助我..？

标签： javascript reactjs jsx

【解决方案1】：

试试下面的代码：


import React from 'react';
import dipesh from '../../dipesh.jpg'; 

export default function Tshirt() {
 let renderTshirt = () => {
    let tShirtList = [];
    for(let i=0; i<50; i++){ 
      tShirtList.push( <img src={dipesh} alt="pic"/> );
    };
    return tShirtList;
 }
 return ( <div> {renderTshirt()} </div> ) 
}

希望这能解决您的问题。

【讨论】：