如果在回调函数中调用 useState 不会重新渲染组件答案

【问题标题】：useState not re-rendering component if it is called inside callback function如果在回调函数中调用 useState 不会重新渲染组件
【发布时间】：2021-06-14 15:17:00
【问题描述】：

我有一个上传视频的组件，我正在尝试显示进度条。这是我的核心代码。

const Upload = () => {
  const [percent, setPercent] = useState(0);
  console.log(percent); // This logs uploaded percentage every time progListener callback is called. From 0 to 100.
  const dropAccepted = async () => {
    const params = {...} // parameters to upload video like filename, file
    await APIs.uploadVideo(params, progListener);
  }
  const progListener = (event) => {
    var p = Math.round((event.loaded * 100) / event.total)
    // console.log(p) logs uploaded percentage from 0 to 100
    setPercent(p);
  }

  return (
    <h6>{percent}</h6>  
    <Dropzone onDropAccepted={dropAccepted}/>
  )
}

在 progListener 回调中，我使用 setPercent 函数更新了百分比，所以我认为 h6 应该打印上传的百分比。但它始终为 0。我的代码有什么问题？我将不胜感激。

【问题讨论】：

使用 useRef 代替 useState
你可以试试：setPercent(() => Math.round((event.loaded * 100) / event.total));
@Syder，我尝试了您的解决方案，但没有成功。
@ThanveerShah，你能给我一个示例，如何使用 useRef 代替 useState？
我们能看到console.log(p) 和console.log(percent) 的日志吗？

标签： reactjs react-hooks use-state

【解决方案1】：

用 useRef 更新它，

useState 不显示最新值的原因是因为 useState 是异步的。因此，在您的情况下，useState 正在更新，但没有给它重新渲染的机会。在这些情况下，useRef 可以发挥更好的作用。

import React, {useRef} from "react";

const Upload = () => {
  const percent = useRef(0);

  const progListener = (event) => {
      percent.current = Math.round((event.loaded * 100) / event.total)
  }

  return (
    <h6>{percent.current}</h6>  
    <Dropzone onDropAccepted={dropAccepted}/>
  )
}

【讨论】：

谢谢@Thanveer。这就像一个魅力。顺便说一句，你能解释一下我的代码有什么问题吗？为什么我的代码不起作用？
我已经更新了我的答案，请接受答案并投票。这将向其他人展示这是一个可行的解决方案。 :)
是的。我会接受你的回答。顺便说一句，据我了解，在调用 setPercent 之后，它会重新渲染组件。实际上，在调用 setPercent 之后，会调用 console.log(percent); 并记录更新后的百分比。这并不意味着组件被重新渲染？