Компонент React не обновляется после вызова setState(). Как отобразить ход выполнения долгого задания в компоненте React JS

Question

Я реализую область Dropzone в React JS. Я хотел бы отобразить в текстовом поле имя файла, которое в настоящее время загружается.

Проблема в том, что реакция отложенного вызова метода render() до конца цикла forEach. Имена файлов регистрируются динамически (console.log), но текстовое поле (dropzoneText) не изменяется в представлении во время выполнения цикла. После окончания цикла отредактируйте render() представление с последним состоянием - последним именем файла в очереди.

Я нашел один случай, который кажется схожим с использованием функции https://facebook.github.io/react/docs/clone-with-props.html, но, похоже, это обходной путь.

Буду признателен за любую помощь.

//... 
import Dropzone from 'react-dropzone'; 

class SampleDropzone extends React.Component{ 

    constructor(props, context) { 
     console.log("Recruitment constructor"); 
     super(props, context); 
     this.state = { 
      dropzoneText: "Drop your files here..." 
     }; 
    } 

    wait(ms){ 
     var start = new Date().getTime(); 
     var end = start; 
     while(end < start + ms) { 
      end = new Date().getTime(); 
     } 
    } 

    onDrop(files) { 

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

    render() { 
    return(
     <div> 
      <Dropzone onDrop={this.onDrop.bind(this)}> 
      {this.state.dropzoneText} 
      </Dropzone> 
     </div> 
    ); 
    } 

}; 

Answer 1

Капля может быть перенесена в setTimeout для обновления состояния.

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