javascript - React 在 this.forceUpdate() 或 this.setState(this.state) 之后不重新渲染 DOM

Question

在从状态变量中的数组中拼接某些内容后，我在重新渲染 DOM 时遇到问题。这是该组件的代码:

class AddMusicResource extends Component {


removeFile(file, event) {
    var filesPreview = this.state.filesPreview
    var filesToBeSent = this.state.filesToBeSent
    var i = filesToBeSent.indexOf(file)
    console.log(i)
    if(i !== -1) {
        filesToBeSent.splice(i, 1)
        filesPreview.splice(i, 1)
    }
    this.setState({filesToBeSent, filesPreview});   
    this.setState(this.state)

}

onDrop(acceptedFiles, rejectedFiles) {
  var filesToBeSent=this.state.filesToBeSent;
  for(var file in acceptedFiles) {
    console.log('Accepted files: ', acceptedFiles[file].name);
    filesToBeSent.push(acceptedFiles[file]);
  }

    var filesPreview=[];
    for(var i in filesToBeSent){
      filesPreview.push(
        <div key={i}>
            {filesToBeSent[i].name}
            <IconButton
                  iconClassName="material-icons"
                  onClick={this.removeFile.bind(this, filesToBeSent[i])}
                >
                  close
            </IconButton>
        </div>
      )
    }
    this.setState({filesToBeSent, filesPreview});
}

render() {
    return (
    <Card shadow={0} style={{ margin: '10px'}}>
        <CardTitle>Add Music Resources</CardTitle>
        <CardText >
           <form id="upload-form">              
                <Dropzone 
                    onDrop={(files) => this.onDrop(files)}
                    multiple={true}
                >
                    <div>Try dropping some files here, or click to select files to upload.</div>
                </Dropzone>
                <div>
                     Files to be uploaded are:
                     {this.state.filesPreview}
                </div>

                <input className={this.state.buttonClasses} type="submit" value="Submit" />
            </form>
        </CardText>
    </Card>
    );
}
}

export default AddMusicResource;

所以基本上我正在获取一个文件输入，然后将文件的名称推送到页面上呈现的 filePreview 数组，但是当用户单击名称右侧的关闭 x 时，我希望文件名将从 DOM 中删除。 removeFile() 正在按预期工作，并且确实从页面中删除了正确的元素，但 DOM 更新以查看该文件已删除的唯一时间是我使用 Dropzone 添加另一个文件时。

我想知道是否有人可以帮助我弄清楚为什么 DOM 在我的 removeFile() 函数结束时没有重新渲染？

我尝试了 this.setState(this.state) 和 this.forceUpdate() 但都没有成功。

Answer 1

你正在改变状态，React 很难找到实际改变的内容。试试这个:

removeFile(file, event) {
    var i = this.state.filesToBeSent.indexOf(file);

    if (i < 0)
        return;

    this.setState((prevState) => {
        return {
            filesToBeSent: prevState.filesToBeSent.filter((element, index) => index !== i),
            filesPreview: prevState.filesPreview.filter((element, index) => index !== i)
        };
    });
}