时间戳

首页 > 解决方案 > 使用回调响应 setState 并传递道具

javascript - 使用回调响应 setState 并传递道具

问题描述

我有一个文件上传组件（我在 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 函数，问题似乎是将文件传递给回调。

谢谢

标签： javascriptreactjscallbacksetstate

解决方案

我建议使用 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
      });   
   });
}

推荐阅读