React子组件无法感知useEffect异步函数的状态更新问题

我尝试传递在useEffect内部异步函数中生成的状态。了解到useRef是处理可变状态的合适方案，期间发现了react-useStateRef，它兼具useRef和useState的功能，解决了主组件状态无法更新及“渲染过多”的错误。但目前状态虽能更新，却无法传递给Canvas组件——我希望根据数据集的温度更新Canvas的背景图。

尽管useEffect内的console.log显示currentBG已更新，但Canvas组件始终只能获取初始值，无法获取更新后的状态，请问这是什么原因？

相关代码 #

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;

问题原因及解决方法 #

核心原因 #

1. ref传递无法触发组件重渲染：你给Canvas传递的是currentBGref.current，但ref的变化不会触发React组件重新渲染。哪怕currentBGref.current已经更新，Canvas组件不会主动重新读取这个值，除非App组件本身触发重渲染。
2. 依赖数组错误：useEffect依赖里的currentBGref.current会导致useEffect在ref变化时重复执行，而且currentFGref根本没定义，属于无效依赖；同时，你在useEffect里直接打印currentBG看到的是更新后的值，是因为react-usestateref的状态更新是同步的，但组件重渲染是异步的，此时Canvas还没来得及更新。
3. 没必要用ref传递状态：react-usestateref返回的currentBG本身就是响应式状态，直接用它传递给子组件即可，状态更新会自动触发组件重渲染，子组件就能拿到最新值。

修复步骤 #

• 移除useEffect依赖数组中的currentBGref.current和未定义的currentFGref.current，只保留city和units，避免不必要的重复执行。
• 给Canvas组件传递currentBG而非currentBGref.current，利用状态的响应式特性触发重渲染。
• 修正代码里的语法错误：比如未定义的city、currentUnit、button变量，这些会导致代码无法正常运行。

修复后的关键代码示例：

function App() {
  const [dataset, setDataset] = useState(null);
  const [units, setUnits] = useState('metric');
  // 假设city是已定义的目标城市变量
  const city = "Beijing";
  // 仅使用状态值，无需ref传递给子组件
  const [currentBG, setCurrentBG] = useState(null);

  useEffect(() => {
    const fetchServerData = async () => {
      const data = await getServerData(city, units);
      setDataset(data);
      // 简化背景更新逻辑
      const threshold = units === "metric" ? 20 : 60;
      setCurrentBG(data.temp <= threshold ? 'snow' : 'sunny');
    };
    fetchServerData();
  }, [city, units]);

  // 修正单位切换逻辑，确保变量合法
  const toggleUnit = () => {
    setUnits(prev => prev === "metric" ? "imperial" : "metric");
  };

  return (
    <div className="app">
      <button onClick={toggleUnit}>
        {units === "metric" ? "切换到°F" : "切换到°C"}
      </button>
      {dataset && <Canvas width={640} height={480} currentBG={currentBG} />}
    </div>
  );
}

额外说明 #

react-usestateref返回的ref主要用于在异步操作（比如定时器、防抖函数）中获取最新状态，绕开React状态更新的异步性；而给子组件传递需要响应式更新的状态时，直接用返回的状态值即可，不需要通过ref传递。

内容的提问来源于stack exchange，提问作者CakeoftheCup