Question

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

mutate_all(df, classify)
#  X1   X2   X3
#1  1    1    1
#2  4 none    1
#3  2    1    1
#4  2    5    1
#5  3    1 none

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

handleFile(files) {

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

- 此日志未定义。

我出错的任何想法？ BTW事件在另一个函数中处理，事件目标（文件）被传递给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
      });   
   });
}

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

1 个答案: