如何在ImageURL数组上进行映射并显示每个URL？

Question

我正在实现多张图片上传。用户应该可以选择图像并查看所选图像的小预览。我将图像URL存储在一个数组中，并对该URL进行迭代以显示图像。问题是图像未在预览中更新。即第一，第二等。图像是相同的（请参见所附图片）。当我将图像URL视为文本时，很明显链接是不同的，并导致不同的图像（参见图片）。因此，尽管网址不同，但我不明白为什么相同的图像会在整体迭代中显示。

export class ImageUploadView extends Component {

constructor(props) {
    super(props);
    this.onChangeImage = this.onChangeImage.bind(this);
    this.fileObj = [];
    this.fileArray = [];
}

onChangeImage (e) {
  this.fileObj.push(e.target.files)
        for (let i = 0; i < this.fileObj[0].length; i++) {
            this.fileArray.push(URL.createObjectURL(this.fileObj[0][i]))
        }
}

  render() {


    return (
      <React.Fragment>
      <div className="card card-body mt-4 mb-4">


        <h1>Add Image</h1>

        <div>
        <input type="file" onChange={this.onChangeImage} multiple ref={this.inputRef} /> 

        {(this.fileArray || []).map((url) => (

            <MDBRow key={url} style={{ margin: '10px', display: 'inline-block' }}>
              <MDBCol>
                <MDBCard style={{ width: '5rem' }}>
                  <MDBCardImage className="img-fluid" src={url} waves />
                  <MDBCardBody>
                    <p> {url} </p>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBRow>
          
                    ))}
                
          </div> 


      </div>
      </React.Fragment>
    );
  }
}