reactjs - 设置数组后重新渲染组件

Question

我正在使用带有功能组件和 Typescript 的 React。我使用 react-dropzone 进行文件上传，因此它具有拖放功能。我的代码是这样的：

<div>
   <Dropzone onDrop={acceptedFiles => uploadImages(acceptedFiles)} accept='image/*' multiple={true} >
      {({ getRootProps, getInputProps }) => (
      <div {...getRootProps()}>
      <input {...getInputProps()} />
      Drag or <a>Browse</a> file to upload
      <i className="icon-upload"></i>
</div>
)}
</Dropzone>
<div className="uploaded-images"> ------------------ 1
   {appImages.length > 0
   ? appImages.map((file, i) => (
   <div key={i}>
      <span>{file.name}</span>
   </div>
   ))
   : []}
</div>
</div>

function uploadImages(files: any) {
    const imageArray = [];
    if (files.length) {
      for (let i = 0; i < files.length; i++) {
        imageArray.push(files[i]);
      }
      setAppImages(imageArray);
    }
  }

因此，uploadImages 函数被调用，但文件名（或第 1 点）的 div 渲染没有发生。在进行了一些调试后，我发现在调用 div（第 1 点）之后，它正在调用 uploadImages 函数。因此，如果在该页面上执行其他操作，则会出现这些文件名。

那么如何重新渲染这个组件或任何其他解决方案呢？

标签： reactjstypescriptreact-dropzone