React Native函数组件状态更新后useLayoutEffect内函数仍调用初始状态问题求助

你遇到的这个问题是React Hooks里非常典型的闭包陷阱，我给你拆解下原因：

你的useLayoutEffect依赖数组只有navigation，所以它只会在组件首次挂载或navigation变化时执行一次。此时headerRight里的 onPress 函数会捕获当时的ids初始状态（也就是[1,2]）。之后哪怕你通过setIds更新了状态，这个 onPress 函数依然引用的是旧闭包里的ids，自然拿不到新值。

而组件内部的onPressInsideComp每次组件渲染都会重新创建，每次都能捕获到最新的ids状态，所以能正常打印更新后的值。

下面给你几个可行的解决方案：

方案1：把ids加入useLayoutEffect的依赖数组 #

这是最直接的解决方式，让useLayoutEffect在ids变化时重新执行，更新headerRight的 onPress 函数，让它捕获最新的ids：

imports...
const Component = ({ navigation }) => {
  const [ids, setIds] = useState([1,2]);
  // 把ids加入依赖数组
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => <HeaderRight onPress={() => {
        console.log(ids); // 现在能拿到最新的ids了
        updateIdsToServerViaAPI();
      }} />
    });
  }, [navigation, ids]); // 新增ids到依赖

  const updateIdsToServerViaAPI = async () => {
    // 这里也能拿到最新的ids了
    console.log('API sending:', ids);
    // 你的API请求逻辑
  }

  // 其他代码不变...
}

优点：简单易懂，不需要额外变量，完全符合React Hooks的依赖规则。
注意：每次ids变化都会重新调用navigation.setOptions，但React Navigation对这个操作做了优化，不会有性能问题。

方案2：使用useRef保存最新的状态 #

如果你不想让useLayoutEffect频繁执行，可以用useRef来保存最新的ids值——ref的.current属性是可变的，不会被闭包捕获：

imports...
const Component = ({ navigation }) => {
  const [ids, setIds] = useState([1,2]);
  // 创建ref保存最新的ids
  const idsRef = useRef(ids);

  // 每次ids变化时同步更新ref
  useEffect(() => {
    idsRef.current = ids;
  }, [ids]);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => <HeaderRight onPress={() => {
        console.log(idsRef.current); // 直接访问ref.current拿到最新值
        updateIdsToServerViaAPI();
      }} />
    });
  }, [navigation]);

  const updateIdsToServerViaAPI = async () => {
    // 用idsRef.current获取最新值
    const latestIds = idsRef.current;
    console.log('API sending:', latestIds);
    // 你的API请求逻辑
  }

  // 其他代码不变...
}

优点：useLayoutEffect只会执行一次（除非navigation变化），适合对性能有极致要求的场景。
缺点：需要额外维护一个ref，代码复杂度略高。

方案3：用useCallback包裹API调用函数 #

你也可以用useCallback包裹updateIdsToServerViaAPI，确保它每次ids变化时都能拿到最新值，再把这个函数加入useLayoutEffect的依赖：

imports...
const Component = ({ navigation }) => {
  const [ids, setIds] = useState([1,2]);

  // 用useCallback包裹，依赖ids
  const updateIdsToServerViaAPI = useCallback(async () => {
    console.log('API sending:', ids);
    // 你的API请求逻辑
  }, [ids]);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => <HeaderRight onPress={() => {
        console.log(ids);
        updateIdsToServerViaAPI();
      }} />
    });
  }, [navigation, updateIdsToServerViaAPI]); // 加入函数到依赖

  // 其他代码不变...
}

这个方案本质和方案1类似，只是把依赖对象换成了包裹后的函数，效果完全一致。

总结一下，方案1是最推荐的，因为它最符合React Hooks的设计理念，代码也最简洁。如果你的场景有特殊性能需求，再考虑方案2。

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