React Navigation中Stack Navigator头部右侧组件内useState状态不更新问题

云上老周

2026-4-28

这个问题其实是JavaScript闭包陷阱导致的，我来给你拆解清楚原因和解决办法：

问题根源

你在useLayoutEffect里设置了headerRight，但依赖数组是[]——这意味着这个effect只会在组件挂载时执行一次。此时SubmitButton组件捕获的是count的初始值（0），后续点击按钮更新count时，useLayoutEffect不会重新运行，headerRight的组件也不会重新创建，所以它一直拿着最初的闭包值，自然不会同步显示最新的计数。

解决方案

方法一：将`count`加入`useLayoutEffect`的依赖数组

当count变化时，让useLayoutEffect重新执行，重新设置headerRight，这样新的SubmitButton就能捕获到最新的count值：

const [count, setCount] = useState(0)

useLayoutEffect(() => {
  navigation.setOptions({
    headerRight: () => <SubmitButton />,
  });
}, [count, navigation]); // 把count添加到依赖数组中

const SubmitButton = () => {
  return (
    <Text>count: {count}</Text>
  );
};

return(
  <Button onPress={()=>{setCount(prev => prev + 1)}} title="增加计数" />
)

额外建议：把setCount(count+1)改成setCount(prev => prev + 1)，这样在并发更新场景下更可靠，避免状态更新依赖旧值的潜在问题。

方法二：将`count`作为props传递给`SubmitButton`

如果你不想频繁重新设置headerOptions，也可以把count作为props传入，让组件的依赖关系更明确：

const [count, setCount] = useState(0)

useLayoutEffect(() => {
  navigation.setOptions({
    headerRight: () => <SubmitButton count={count} />,
  });
}, [count, navigation]);

const SubmitButton = ({ count }) => {
  return (
    <Text>count: {count}</Text>
  );
};

return(
  <Button onPress={()=>{setCount(prev => prev + 1)}} title="增加计数" />
)

这种方式让SubmitButton的状态来源更清晰，也方便后续扩展组件功能。