用回调和传递道具来反应setState

Question

我有一个文件上传组件（我正在React中工作），它会通过点击处理程序触发文件上传。 我想在上传过程中显示加载图标。 因此，当调用文件处理程序函数时，我的加载状态设置为true。 但是，状态更改有时仅在文件上传开始之前呈现，在此期间浏览器冻结。 因此，我四处搜索，发现可以将回调传递给setState，该回调将在状态更改和组件重新呈现后触发。 但是，在我的情况下，我需要将从事件收集的文件传递给此回调函数……但这不起作用。 我努力了：

handleFile(files) {

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

-此日志：文件列表{length：0}

handleFile(files) {

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

-此日志未定义。

有什么想法我会出错吗？ 顺便说一句，事件是在另一个函数中处理的，并且事件目标（文件）正在传递给handleFiles函数，问题似乎出在将文件传递给回调函数。

谢谢

Answer 1

我建议使用Promise处理异步请求； 像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
      });   
   });
}