Javascript 插入输入类型文件后对预览图像作出反应

在一个页面上修改一个产品，我会抓取它来填充字段并显示图像。但当我想通过输入类型文件更改图像时，图像不再显示。将更新imgCollection变量，但不会更新渲染。如何在每次变量更改时更新渲染？谢谢

...
this.state = {  imgCollection: '' }
this.handleChangeImgCollection = this.handleChangeImgCollection.bind(this)

    handleChangeImgCollection = event => {
        this.setState({ imgCollection: event.target.files })
    }

render() {
  const {imgCollection} = this.state
  const imgDisplay = []

       for (let i = 0; i < imgCollection.length; i++) {
            imgDisplay.push(<img src={imgCollection[i]} key={[i]} alt="img" />);
        }
  return (
    { imgDisplay }

     <Form.Group>
      <Form.File defaultValue={imgCollection}
         className="position-relative"
           id="custom-file"
           label="Inserer des images"
           type="file"
           name="imgCollection"
           onChange={this.handleChangeImgCollection} 
           multiple
           required
          />
       </Form.Group>
  )
}

。。。
this.state={imgCollection:'}
this.handleChangeImgCollection=this.handleChangeImgCollection.bind（this）
handleChangeImgCollection=事件=>{
this.setState（{imgCollection:event.target.files}）
}
render（）{
const{imgCollection}=this.state
常量imgDisplay=[]
for（设i=0；i

试试这个：

render（）{
const{imgCollection}=this.state
常量imgDisplay=[]
for（设i=0；i}
)
}

我找到了一个解决方案，我不知道它是否是在react中选择的最佳解决方案，但它很有效..复杂的图像管理

...
this.state = {  imgCollection: '' }   // urls fetch
this.handleChangeImgCollection = this.handleChangeImgCollection.bind(this)

  handleChangeImgCollection = event => {
     var preview = document.querySelector('#preview')
     var files = document.querySelector('input[type=file]').files;
     var displayimgC = document.querySelector('.displayImgCollection')
        
     preview.innerHTML = '<div id="preview"></div>'
     displayimgC.style.visibility = 'hidden'
     displayimgC.style.height = "0px"

   const readAndPreview = (file) => {
     if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
       var reader = new FileReader();
       reader.addEventListener("load", function () {
          var image = new Image();
          image.height = 200;
          image.title = file.name;
          image.src = this.result;
          preview.appendChild(image);
        }, false);
         reader.readAsDataURL(file);
      }
    }
    if (files) {
      [].forEach.call(files, readAndPreview);
    }
    this.setState({ imgCollection: event.target.files })
 }

render() {
  const {imgCollection} = this.state
  const imgDisplay = []

  for (let i = 0; i < imgCollection.length; i++) {
      imgDisplay.push(imgCollection[i]);
  }

  return (
    <React.Fragment>
     <div className="justify-content-md-center p-3">
        <div id="preview"></div>
        <div className="displayImgCollection">{imgDisplay}</div>

     <Form.Group>
      <Form.File defaultValue={imgCollection}
         className="position-relative"
           id="custom-file"
           label="Inserer des images"
           type="file"
           name="imgCollection"
           onChange={this.handleChangeImgCollection} 
           multiple
           required
          />
       </Form.Group>
    </React.Fragment>
  )
}
```

。。。
this.state={imgCollection:'}//URL获取
this.handleChangeImgCollection=this.handleChangeImgCollection.bind（this）
handleChangeImgCollection=事件=>{
var preview=document.querySelector（“#preview”）
var files=document.querySelector（'input[type=file]'）。files；
var displayimgC=document.querySelector（'.displayImgCollection'）
preview.innerHTML=“”
displayimgC.style.visibility='hidden'
displayimgC.style.height=“0px”
常量readAndPreview=（文件）=>{
if（/\（jpe？g | png | gif）$/i.test（file.name））{
var reader=new FileReader（）；
reader.addEventListener（“加载”，函数（）{
var image=新图像（）；
image.height=200；
image.title=file.name；
image.src=this.result；
预览。追加子对象（图像）；
}，假）；
reader.readAsDataURL（文件）；
}
}
如果（文件）{
[].forEach.call（文件、读取和预览）；
}
this.setState（{imgCollection:event.target.files}）
}
render（）{
const{imgCollection}=this.state
常量imgDisplay=[]
for（设i=0；i

um我不明白当this.state.imgCollection更改时，这应该更新呈现？当我加载页面时，图像呈现良好，但是当我插入新图像时，它不会显示。事实上，当加载新图像时，我收到一个“$$typeof:Symbol（react.element）”而且不知道如何显示其他东西集名称

name=“imgCollection[]”