reactjs - 如果在回调函数中调用 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 函数更新了百分比，所以我认为 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}/>
  )
}