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()正在按预期工作，并且确实从页面中删除了正确的元素，但是只有在我使用Dropzone添加另一个文件时，DOM才会更新以查看该文件已被删除。

我想知道是否有人可以帮我弄清楚为什么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)
        };
    });
}

在this.forceUpdate（）或this.setState（this.state）之后，React不重新呈现DOM

1 个答案: