Компонент не рендерится даже после вызова setState

Question

У меня есть компонент реакции, в котором пользователь может загрузить изображение, а также он показывает предварительный просмотр загруженного изображения.Он может удалить изображение, нажав кнопку удаления, соответствующую изображению.Я использую для этого реакционную зону.Вот код:

class UploadImage extends React.Component {
  constructor(props) {
    super(props);
    this.onDrop = this.onDrop.bind(this);
    this.deleteImage = this.deleteImage.bind(this);
    this.state = {
      filesToBeSent: [],
      filesPreview: [],
      printCount: 10,
    };
  }

  onDrop(acceptedFiles, rejectedFiles) {
    const filesToBeSent = this.state.filesToBeSent;
    if (filesToBeSent.length < this.state.printCount) {
      this.setState(prevState => ({
        filesToBeSent: prevState.filesToBeSent.concat([{acceptedFiles}])
      }));
      console.log(filesToBeSent.length);
      for (var i in filesToBeSent) {
        console.log(filesToBeSent[i]);
        this.setState(prevState => ({
          filesPreview: prevState.filesPreview.concat([
            <div>
              <img src={filesToBeSent[i][0]}/>
              <Button variant="fab" aria-label="Delete" onClick={(e) => this.deleteImage(e,i)}>
                <DeleteIcon/>
              </Button>
            </div>
          ])
        }));
      }
    } else {
      alert("you have reached the limit of printing at a time")
    }
  }

  deleteImage(e, id) {
    console.log(id);
    e.preventDefault();
    this.setState({filesToBeSent: this.state.filesToBeSent.filter(function(fid) {
        return fid !== id
    })});
}

  render() {
    return(
      <div>
        <Dropzone onDrop={(files) => this.onDrop(files)}>
          <div>
            Upload your Property Images Here
          </div>
        </Dropzone>
        {this.state.filesToBeSent.length > 0 ? (
          <div>
            <h2>
              Uploading{this.state.filesToBeSent.length} files...
            </h2>
          </div>
        ) : null}
        <div>
          Files to be printed are: {this.state.filesPreview}
        </div>
      </div>
    )
  }
}

export default UploadImage;

Мой вопрос: мой компонент не выполняет рендеринг даже после добавления или удаления изображения.Кроме того, я позаботился о том, чтобы не мутировать массивы состояний напрямую.Кто-нибудь, пожалуйста, помогите.

Answer 1

Попробуйте вот так, я использовал ES6

.