React组件中setData更新状态后onRefresh回调读取旧值、UI显示新值的原因

这个问题的核心原因是**闭包（Closure）**在React函数组件渲染机制中的作用，我来给你拆解清楚：

当React函数组件（比如这里的Foo）执行一次渲染时，会生成当前渲染周期的所有变量和函数的快照。第一次渲染时，data的初始值是42，此时onRefresh函数被创建——它会捕获这个渲染周期里的data变量，也就是值为42的那个版本。

之后useEffect在组件挂载完成后执行，把data更新为43，这会触发组件重新渲染。在新的渲染周期里，会生成新的data变量（值为43）和新的onRefresh函数（这个新函数捕获的是更新后的data）。但问题出在SomeComponent身上：如果它没有正确响应onRefresh的变化（比如用了React.memo但没把onRefresh加入依赖列表，或者内部缓存了旧的回调引用），那么它调用的还是第一次渲染时创建的那个onRefresh，自然读取到的是被捕获的旧值42。

而UI里的<Text>{data}</Text>能显示43，是因为组件重新渲染时，JSX会使用当前渲染周期的data变量，所以能正确展示最新的状态。

解决方法 #

这里有两种常见的处理思路：

• 用useRef保存最新值：useRef的.current属性不会受渲染周期影响，始终能拿到最新的state值：

function Foo() { 
  const [data, setData] = useState(42);
  const dataRef = useRef(data);
  // 每次data更新时同步到ref
  useEffect(() => {
    dataRef.current = data;
  }, [data]);

  useEffect(() => { 
    console.log("SET DATA to 43"); 
    setData(43); 
  }, []); 

  function onRefresh() { 
    console.log("REFRESH"); 
    console.log(dataRef.current); // 这里会拿到最新的43
  } 

  return ( 
    <View> 
      <SomeComponent onRefresh={onRefresh} /> 
      <Text>{data}</Text> 
    </View> 
  ); 
}

• 确保回调函数能更新：用useCallback包裹onRefresh，并把data加入依赖数组，这样当data变化时会生成新的回调，确保SomeComponent能拿到最新的版本：

function Foo() { 
  const [data, setData] = useState(42); 

  useEffect(() => { 
    console.log("SET DATA to 43"); 
    setData(43); 
  }, []); 

  const onRefresh = useCallback(() => { 
    console.log("REFRESH"); 
    console.log(data); 
  }, [data]); // 依赖data，data变化时重新创建回调

  return ( 
    <View> 
      <SomeComponent onRefresh={onRefresh} /> 
      <Text>{data}</Text> 
    </View> 
  ); 
}

如果SomeComponent用了React.memo，记得要让它依赖onRefresh，这样回调更新时组件会重新渲染并使用新的回调。

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