可以使用 useCallback 和 useRef 来解决这个问题，如下所示：

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

function Example() {
  const [value, setValue] = useState('');
  const [data, setData] = useState([]);

  const fetchData = useCallback(async () => {
    const result = await fetch('https://example.com/api/data');
    const json = await result.json();
    setData(json);
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const submitData = useCallback(async () => {
    await fetch('https://example.com/api/data', {
      method: 'POST',
      body: JSON.stringify({ value })
    });
    fetchData();
  }, [fetchData, value]);

  const valueRef = useRef(value);
  useEffect(() => {
    valueRef.current = value;
  }, [value]);

  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('value:', value);
      console.log('current value:', valueRef.current);
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);    

  return (
    

       setValue(e.target.value)} />
      submit
      

        {data.map((item) => (
          
{item.value}
        ))}
      
    
  );
}

在上面的示例中，我们使用了 useCallback 来获取 fetchData，因为它是一个被依赖的函数。然后，我们在 useEffect 中使用它来获取数据。

我们使用 useCallback 来获取 submitData，因为它也被用作回调函数。然后，我们在 useEffect 中使用它来发送数据。

我们使用 useRef 来保存 value 的引用，并在 useEffect 中更新它。这允许我们在实时更新时比较当前值和引用值，并测试是否存在僵化状态的问题。