React组件for循环渲染图片异常：仅渲染1次而非50次

嘿，我一眼就发现问题所在了——你写的renderTshirt函数里，for循环第一次迭代就执行了return语句，直接把第一张<img>元素返回出去了，循环还没跑完剩下的49次就终止了，这就是为啥页面只显示1张图片~

方法1：用React最常用的数组map渲染列表 #

这是React里渲染重复元素的标准做法，先创建一个长度为50的空数组，然后用map遍历生成每个图片元素，别忘了给每个元素加唯一的key（这里用索引就行，简单场景完全够用）：

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

export default function Tshirt() {
  return (
    <div>
      {/* 生成50个图片元素 */}
      {Array.from({ length: 50 }).map((_, index) => (
        <img key={index} src={dipesh} alt="pic" />
      ))}
    </div>
  )
}

方法2：修改原循环逻辑，先收集元素再返回 #

如果你更习惯用for循环，那可以先创建一个数组来存放所有图片元素，等循环跑完再把整个数组返回，而不是在循环里直接return：

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

export default function Tshirt() {
  let renderTshirt = () => {
    const imageList = [];
    for(let i=0; i < 50; i++) {
      // 把每个图片元素加入数组
      imageList.push(<img key={i} src={dipesh} alt="pic"/>);
    }
    // 循环结束后返回整个数组
    return imageList;
  }
  return ( <div> {renderTshirt()} </div> )
}

小提醒 #

React渲染列表的时候，每个子元素都需要有唯一的key属性，这能让React更高效地更新DOM，避免不必要的性能损耗哦~

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