React + TS +钩子在操作调度时出现问题

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

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1); // 使用函数形式更新状态
    }, 1000);

    return () => clearInterval(timer); // 清理定时器
  }, []);

  return <div>{count}</div>;
};

export default Counter;

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

const DataFetching: React.FC = () => {
  const [data, setData] = useState<any>(null);
  const [id, setId] = useState(1);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${id}`);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [id]); // 确保id变化时重新获取数据

  return (
    <div>
      <button onClick={() => setId(id + 1)}>Fetch New Data</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataFetching;

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

const CounterWithClosure: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let countRef = count; // 错误示例，这里会捕获到初始值
    const timer = setInterval(() => {
      console.log(countRef); // 这里始终打印初始值
    }, 1000);

    return () => clearInterval(timer);
  }, []); // 注意依赖数组为空

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

export default CounterWithClosure;

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

const CounterWithRef: React.FC = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count; // 更新ref的值
  }, [count]);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(countRef.current); // 正确打印当前值
    }, 1000);

    return () => clearInterval(timer);
  }, []);

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

export default CounterWithRef;