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

在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]);

  const handleClick = () => {
    setTimeout(() => {
      console.log(countRef.current); // 确保拿到的是最新的count值
    }, 1000);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={handleClick}>Log Count in 1 Second</button>
    </div>
  );
}

在这个例子中，我们使用countRef来保存最新的count值，这样即使setTimeout回调延迟执行，它仍然可以访问到最新的状态。
2.使用函数形式的setState
如果setTimeout的回调函数中需要更新状态，可以使用函数形式的setState，它能确保你拿到最新的状态值。

const handleClick = () => {
  setTimeout(() => {
    setCount((prevCount) => {
      console.log(prevCount); // 这里的prevCount是最新的
      return prevCount + 1;
    });
  }, 1000);
};

在这个例子中，setCount的函数形式提供了最新的prevCount，无论闭包捕获了什么，这个函数形式总是能访问到最新的状态。
3.使用自定义hook
你可以创建一个自定义的hook来封装这个逻辑，以便在多个组件中复用。

import { useRef, useEffect } from 'react';

function useLatest(value) {
  const ref = useRef(value);

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

// 在组件中使用
const latestCount = useLatest(count);

const handleClick = () => {
  setTimeout(() => {
    console.log(latestCount);
  }, 1000);
};