调用setState（）后，React组件不会更新。如何在React JS组件中显示长时间运行的任务的进度

Question

我在React JS中实现了Dropzone区域。我想在文本字段中显示当前正在上传的文件名。

问题是，反应推迟调用render（）方法直到forEach循环结束。动态记录文件名（console.log），但在循环执行期间文本字段（dropzoneText）在视图中不会更改。循环结束后，将render（）视图与最后一个状态 - 队列中的最后一个文件名相对应。

我发现了一个使用https://facebook.github.io/react/docs/clone-with-props.html功能似乎相似的案例，但似乎是解决方法。

我将不胜感激。

div60

Answer 1

可以将drop移动到setTimeout以进行状态更新。

files.forEach((file)=> {
  console.log('Received file: ', file.name);
  this.setState({dropzoneText: file.name});
  setTimeout(() => {
    this.saveFileToServerFromDropzone(file);
    this.wait(1000);
  }, 100);
});