ReactJS/JS假数组渲染异常：为何仅渲染一次而非十次？

问题出在你创建数组的方式上：[Array(10)] 实际上生成了一个包含单个空数组的外层数组（外层数组长度仅为1），所以map只会执行一次，自然只渲染一个元素。

正确写法 #

你需要直接创建长度为10的可遍历数组，以下是两种常用实现方式：

方式1：用Array(10).fill()填充空数组 #

{Array(10).fill().map((e,i)=>{
    return(
        <div key={i} className="w-[250px] slide flex align-center p-[15px]">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png" alt="a" />
        </div>);
})}

方式2：用Array.from()直接生成数组 #

{Array.from({length:10}).map((e,i)=>{
    return(
        <div key={i} className="w-[250px] slide flex align-center p-[15px]">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png" alt="a" />
        </div>);
})}

补充说明 #

• Array(10)会创建长度为10但所有位置都是空值的数组，直接调用map会跳过这些空值；fill()会给每个位置填充默认值（不指定参数时为undefined），让map能遍历每一个位置。
• Array.from({length:10})会直接生成包含10个undefined元素的数组，天生支持map遍历。

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