react如何解决setTimeout获取不到最新数据问题

原创

已于 2024-08-23 15:19:46 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2024-08-23 15:19:21 首次发布

在React中，setTimeout可能会由于闭包的特性获取不到最新的数据，因为当setTimeout的回调函数被定义时，它捕获的是那个时刻的状态，如果状态更新了但setTimeout还没执行，那么回调函数内使用的状态值将不会是最新的。
解决方案:
1.使用最新的状态值
通过使用React的 useRef hook来持有最新的状态值，确保在setTimeout的回调函数中访问的状态是最新的。

import {
   
    useState, useRef, useEffect } from 'react';

function ExampleComponent() {
   
   
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
   
   
    countRef.current = count;
  }, [count