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

Question

I'm having an issue re-rendering the DOM after something has been spliced from an array in my state variable. Here is the code for this component:

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;

So basically I'm taking a file input and then pushing the name of the file to a filePreview array that is being rendered on the page, but when a user clicks the close x to the right of the name I expect that the name of the file would be removed from the DOM. The removeFile() is working as intended and is indeed removing the correct element from the page, but the only time that the DOM would update to see that file as removed is if I added another file using the Dropzone.

I was wondering if anyone could help me figure out why the DOM is not rerendering at the end of my removeFile() function?

I have tried both this.setState(this.state) and this.forceUpdate() but neither have been successful.

Answer 1

You are mutating the state and React has a hard time to find what actually changed. Try this instead:

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)
        };
    });
}