如何使用 XMLHttpRequest 检查我的 S3 存储桶中的最后一个可用项目在 React 组件中

如何解决如何使用 XMLHttpRequest 检查我的 S3 存储桶中的最后一个可用项目在 React 组件中

例如，我的 S3 存储桶目录中有多个图像，
但情况是我不知道有多少图像，因为每个目录的图像数量不同。

https://s.dir1/img01.jpg ~ img10.jpg
https://s.dir2/img01.jpg ~ img20.jpg
https://s.dir3/img01.jpg ~ img14.jpg

=> dir1 有 10 个图片网址，dir2 有 20 个图片网址，dir3 有 14 个图片网址
（每张图片的网址都有一个简单的数字名称，为方便起见）

我需要发送 XMLHttpRequest 来检查图像的姓氏。 例如，我不想制作 S3 目录中不存在的元素 <img src="https://s.dir1/img14.jpg >

问题是这段代码只对最后一个起作用，（在这种情况下，结果imageList = ["https://s.dir1/img02.jpg"]），
我不知道要检查 dir1

中的最后几张图片

那么如何检查每个 S3 目录中的最后一个 URL 名称，我想让 React 组件中的 imageList(array) 状态可用。

    constructor(props) {
       super(props);
       this.state = {imageList: []}
    }

    componentDidMount() {
        const pushImage = (newImage) => {
            this.setState({imageList: [...imageList,newImage]})
        }
        this.UrlExists(pushImage);
    }

    UrlExists = (callback) => {
        const url = `https://s.dir1/01.jpg`
        const url2 = `https://s.dir1/02.jpg`
        const http = new XMLHttpRequest();
        const http2 = new XMLHttpRequest();

        
        this.httpRequest(http,url,callback);
        this.httpRequest(http2,url2,callback);

    }

    httpRequest = (http,callback) => {
        http.open('HEAD',url);
        http.onreadystatechange = function() {
            if (this.readyState === 4) {
                console.log('ready state',this.readyState);
                if(this.status >= 400) {
                    console.log('error');
                    return 'false!!!';
                } else {
                    callback(url)
                    return 'true!!!'
                }
            }
        }
        http.send();
    }
    
    render() {
      return ( 
         <div>
           {this.state.imageList.map( image => (<img src={image} alt="my image" />))}
         </div>
      )
    }

我通过引用这个问题来编写我的代码：HTTP HEAD Request in Javascript/Ajax?