Реагируйте на setState с помощью функции обратного вызова и пропуска

Question

У меня есть компонент загрузки файлов (я работаю в React), который запускает загрузку файлов с помощью обработчика нажатия.Я хочу отобразить значок загрузки во время загрузки.Поэтому у меня есть состояние загрузки, которое я установил в true, когда вызывается функция обработчика файлов.Однако изменение состояния только иногда отображается перед началом загрузки файла, во время которого браузер зависает.Поэтому я искал и обнаружил, что могу передать обратный вызов setState, который сработает после изменения состояния и повторного рендеринга компонента.Однако в моей ситуации мне нужно передать файлы, собранные из события, в эту функцию обратного вызова ... но это не работает.Я пробовал:

handleFile(files) {

    this.setState({ loading: true }, () => {
         console.log(files)
         // here is where I want to read the files
    })
}

- это журналы: список файлов {длина: 0}

handleFile(files) {

    this.setState({ loading: true }, (files) => {
         console.log(files)
         // here is where I want to read the files
    })
}

- это журналы не определены.

Любые идеи, где я нахожусьчто не так с этим?Кстати, событие обрабатывается в другой функции, а цель события (файлы) передается в функцию handleFiles, похоже, что проблема заключается в передаче файлов обратному вызову.

Спасибо

Answer 1

Я бы рекомендовал использовать обещание для обработки асинхронных запросов;библиотека типа axios работает очень хорошо.Вы можете легко управлять изменениями состояния.Например:

handleFile(url, files) {
   this.setState({
      loading: true
   });

   axios.post(url, {
      data: files
   }).then(response => {
      this.setState({
         loading: false
      });
   })
   .catch(error => {
      console.log('Error posting data.', error);
      this.setState({
         error: true
      });   
   });
}