2

我有一个反应组件，用户可以在其中上传图片，并且他还显示了上传图片的预览。他可以通过单击图像对应的删除按钮来删除图像。我正在使用 react-dropzone 。这是代码：

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;

我的问题是即使在添加或删除图像后我的组件也不会重新渲染。另外，我已经注意不直接改变状态数组。有人，请帮忙。

4

1 回答 1

5

像这样试试，我用过ES6

编辑 7myoo2x226 .

于 2018-09-29T06:58:50.043 回答