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

Question

我是新手，我正在使用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}
 />

Answer 1

您的'onDrop'函数在'add'和'remove'动作中被调用。而且，您要在onDrop中添加图像文件条目，这就是为什么每次调用都重复图像条目的原因。

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

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

请注意：我已经使用您在问题中提供的带有react-images-upload的链接尝试了此操作。 希望对您有帮助！

P.S。我对您使用的source提出了拉取请求。