如果在回调 function 中调用 useState 不会重新渲染组件

Question

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

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 function 更新了百分比，所以我认为h6应该打印上传的百分比。 但它总是 0。我的代码有什么问题？ 我将不胜感激任何帮助。

Answer 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}/>
  )
}