我试图传递一个在异步函数内部生成的状态，该函数本身位于 useState 内部。我了解到 useRef 可能是解决此问题的最佳方法，因为它可以引用可变状态，并且在这个过程中了解了 React-useStateRef，它最终解决了我的主组件内状态永远不会更新的另一个问题（会不断得到“渲染太多”错误）。因此它本质上充当 useRef 和 useState 的合二为一。

但是，虽然我的状态最终更新了，但它仍然没有传递到我的 Canvas 组件。我正在尝试根据从数据集中获得的温度来更新画布的 BG 图形。

import { useEffect } from 'react';
import useState from 'react-usestateref';
import { getServerData } from './serviceData';
import "./App.css"
import Canvas from './components/Canvas';

function App() {
  const [dataset, setDataset] = useState(null);
  const [units, setUnits] = useState('metric');

  // canvas background graphic stuff
  var [currentBG, setCurrentBG, currentBGref] = useState(null);

  useEffect(() => {
    const fetchServerData = async () => {
      const data = await getServerData(city, units);
      setDataset(data);

      function updateBG() {
        const threshold = units === "metric" ? 20 : 60;
        if (data.temp <= threshold) {
        setCurrentBG('snow');
        }
        else {
        setCurrentBG('sunny');
        }
      }
      updateBG();
    }
    fetchServerData();
    console.log(currentBG)
  }, [city, units, currentBGref.current, currentFGref.current])
    const isCelsius = currentUnit === "C";
    button.innerText = isCelsius ? "°F" : "°C";
    setUnits(isCelsius ? "metric" : "imperial");
  };

  return (
    <div className="app">
        { dataset && ( <Canvas width={640} height={480} currentBG={currentBGref.current}></Canvas> )}
    </div>
  );
}

export default App;

我只能传递初始值，并且它永远不会更新超过该值，尽管 useEffect 内部的 console.log 显示它肯定正在更新。那么为什么它没有传递给我的组件呢？