Javascript 为什么React只渲染数组中的最后两个元素？

我正在尝试渲染文件夹中的一系列图像。我已经设法做到了这一点，但我想实现一个系统，其中图像以2行的形式出现。这已经起作用了，但它似乎覆盖了其他行，因为我只渲染了最后两行。我将非常感激任何帮助。这是我的密码：

var imageArray = [];
var imageCount = 0;
// Obtain the root 
const rootElement = document.querySelector('.containerMain')
// Create a ES6 class component    
    class ShoppingList extends React.Component { 
// Use the render function to return JSX component      
    render() { 
        return (
        <div className="row" key={uuidv4()}>
                {imageArray}
        </div>
      );
      } 
    }

function renderImages() {
    ReactDOM.render(
        <ShoppingList/>,
        rootElement
      )
}

var folder = "Images/";
var numberOfImages = 0;

function ajaxRender() {
    return $.ajax({
        url : folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                    if(imageCount===2) {
                        renderImages()
                        imageCount = 0;
                        imageArray = [];
                    } else {
                        imageArray.push(<img src={val} key={val}></img>)
                        imageCount += 1;
                    }
                    console.log(imageArray);
                } 
            });
        }
    });
}

$.when(ajaxRender().done(function(){
    console.log(imageCount)
}));

var-imageArray=[]；
var-imageCount=0；
//获得根
const rootElement=document.querySelector（'.containerMain'）
//创建ES6类组件
类ShoppingList扩展了React.Component{
//使用render函数返回JSX组件
render（）{
返回(
{imageArray}
);
} 
}
函数呈现（）{
ReactDOM.render(
,
根元素
)
}
var folder=“Images/”；
var numberOfImages=0；
函数ajaxRender（）{
返回$.ajax({
url:文件夹，
成功：功能（数据）{
$（数据）.find（“a”）.attr（“href”），function（i，val）{
如果（val.match（/\（jpe？g | png | gif）$/）{
如果（imageCount==2）{
渲染（）
imageCount=0；
imageArray=[]；
}否则{
imageArray.push（）
imageCount+=1；
}
log（imageArray）；
} 
});
}
});
}
$.when（ajaxRender（）.done）（函数（））{
console.log（imageCount）
}));

---

任何帮助都将不胜感激。提前感谢。

每次放入2张图像时，您似乎都在重置阵列？如果图像索引为偶数，则渲染一行，如果图像索引为奇数，则渲染一行，如果图像索引为奇数，则渲染可能位于其下方的一行，难道不能创建这样一个系统吗？

似乎需要重置

imageArray=[]都会。为什么要混合使用jQuery和React？它们彼此非常正交。您应该将
imageArray
置于React状态，并通过组件生命周期方法进行更新，即
componentDidMount
|
componentDidUpdate
。您似乎缺少许多基础知识。
imageArray=[]我想，你在同一个根元素中渲染图像，这将覆盖旧图像，你将获得最后一组图像（2）@DrewReese是的，我正在重置它，因为我想不出更好的方法来渲染每2个元素。听起来你只是想要一个2列网格布局，即渲染所有图像，每行2个图像？