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

在从状态变量中的数组拼接某些内容后，重新呈现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;

class AddMusicSource扩展组件{
removeFile（文件、事件）{
var filesPreview=this.state.filesPreview
var filesToBeSent=this.state.filesToBeSent
var i=filesToBeSent.indexOf（文件）
控制台日志（i）
如果（i！==-1）{
filesToBeSent.splice（i，1）
文件预览.拼接（i，1）
}
this.setState（{filesToBeSent，filepreview}）；
this.setState（this.state）
}
onDrop（接受文件、拒绝文件）{
var filesToBeSent=this.state.filesToBeSent；
for（acceptedFiles中的var文件）{
console.log（'Accepted files:'，acceptedFiles[file].name）；
filesToBeSent.push（acceptedFiles[file]）；
}
var filesPreview=[]；
for（filesToBeSent中的变量i）{
文件预览.push(
{filesToBeSent[i].name}
关闭
)
}
this.setState（{filesToBeSent，filepreview}）；
}
render（）{
返回(
添加音乐资源
this.onDrop（文件）}
多重={true}
>
尝试在此处删除一些文件，或单击以选择要上载的文件。
要上载的文件包括：
{this.state.filesPreview}
);
}
}
导出默认AddMusicSource；

因此，基本上我接受文件输入，然后将文件名推送到页面上呈现的filePreview数组中，但是当用户单击名称右侧的close x时，我希望文件名将从DOM中删除。

removeFile（）

正在按预期工作，并且确实正在从页面中删除正确的元素，但是只有在我使用Dropzone添加另一个文件时，DOM才会更新以看到该文件被删除

我想知道是否有人能帮我弄清楚为什么DOM没有在我的

removeFile（）

函数末尾重新命名

---

我尝试了

this.setState（this.state）

和

this.forceUpdate（）

，但都没有成功

你正在改变状态，很难找到真正改变的是什么。请尝试以下方法：

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

removeFile（文件、事件）{
var i=this.state.filesToBeSent.indexOf（文件）；
if（i<0）
返回；
this.setState（（prevState）=>{
返回{
filesToBeSent:prevState.filesToBeSent.filter（（元素，索引）=>index！==i），
FilePreview:prevState.FilePreview.filter（（元素，索引）=>index！==i）
};
});
}

谢谢您的帮助，您提供的代码与我正在做的代码有什么区别？我很高兴能帮助您。因此，不同之处在于React执行浅层比较以确定是否需要重新渲染。在代码中，您直接对filesToBeSent和filepreview数组进行变异，因此旧数组和发生更改的数组具有相同的引用，因此React认为内容没有更改。在我提供的代码中，我实际上是将整个新数组设置为状态。这样，React会检查旧数组的引用是否与新数组的引用不同，因此会发出重新渲染。请注意，我使用array方法过滤器设置新状态。filter方法使用通过提供的条件的元素创建一个新数组。