我正在try 使用REACT-DROPZONE拖放一个图像,当我将一个图像拖放到DropZone时,它被存储在一个FILES数组中的REACT状态.

问题是,当我从数组中删除一个图像时,其余项的拇指就消失了.

下面是一个例子: https://stackblitz.com/edit/react-ts-jej14g?file=App.tsx

Example

推荐答案

问题出在你的handleDeleteImage方法中

你所要做的就是

  • 克隆现有数组
  • 在请求的index处吊销URL
  • 删除元素
  • 更新files状态
 function handleDeleteImage(index: number) {
    const filesArray = [...files];
    URL.revokeObjectURL(filesArray[index].preview);
    filesArray.splice(index, 1);
    setFiles(filesArray);
  }

工作演示:https://stackblitz.com/edit/react-ts-pxxyng?file=App.tsx

Javascript相关问答推荐

yarn安装一个本地npm包,以便本地包使用main项目的node_modules(ckeditor-duplicated-modules错误)

类型自定义lazy Promise. all

Next.js(react)使用moment或不使用日期和时间格式

google docs boldText直到按行执行应用脚本错误

为什么当我解析一个promise时,输出处于挂起状态?

Chart.js-显示值应该在其中的引用区域

使用POST请求时,Req.Body为空

VUE 3捕获错误并呈现另一个组件

我在Django中的视图中遇到多值键错误

不能将空字符串传递给cy.containes()

当使用';字母而不是与';var#39;一起使用时,访问窗口为什么返回未定义的?

从页面到应用程序(NextJS):REST.STATUS不是一个函数

使用Nuxt Apollo在Piniastore 中获取产品细节

邮箱密码重置链接不适用于已部署的React应用程序

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

如何修复使用axios运行TSC index.ts时出现的错误?

使用Reaction窗体挂钩注册日历组件

如何在Jest中模拟函数

需要刷新以查看Mern堆栈应用程序中的更改