如何解决设置数组后重新渲染组件反应
我将 React 与功能组件和 Typescript 一起使用。我使用 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 函数。因此,如果没有该页面执行其他操作,则会出现这些文件名。
那么我该如何重新渲染这个组件或任何其他解决方案?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。