react图像上传如何在onchange期间更新状态数组

IT技术 reactjs
2021-05-06 04:17:49

我是 React 新手,我正在使用以下内容创建上传图片功能:https : //github.com/JakeHartnell/react-images-upload作为指南。

但是我在设置状态时遇到问题,即使我从上传中删除它,它也会添加文件

在此处输入图片说明

正如您在屏幕截图中看到的,我添加了两张照片,删除了一张,然后又添加了一张。当我检查状态时。它在数组中有 6 个文件。我该如何解决这个问题?

这是我的 onchange 功能:

 onDrop = picture => {
      this.setState({
        artistGallery: this.state.artistGallery.concat(picture),
      });
  };

我在这里称它:

 <ImageUploader
     withIcon={true}
     buttonText='Choose images'
     onChange={this.onDrop}
     imgExtension={['.jpg', '.gif', '.png', '.gif']}
     maxFileSize={5242880}
     withPreview={true}
 />
1个回答

您的'onDrop'功能正在被调用'add'以及'remove'采取行动。并且您正在连接图像文件条目,onDrop这就是为什么在每次调用时都会复制图像条目的原因。

在您的情况下,假设“图片”是图像数组,请将您的 onDrop 函数更改为:

onDrop = picture => {
      this.setState({
        artistGallery: picture
      });
};

请注意:我已使用您在问题中提供的带有 react-images-upload 的链接进行了尝试。希望能帮助到你!

PS 我已经对您使用来源提出了拉取请求