React Native返回页面Family状态未更新问题求助

我是React Native新手，在MyFamily页面调用getFamily()获取数据，但在其他页面修改Family值后返回该页面，无法看到更新。尝试用useEffect处理，但日志无输出也未生效。

当前代码 #

MyFamily页面代码 #

export default function MyFamily({ navigation, props, person, inheritors }) {
  console.log(getFamily());

  let [family, setFamily] = useState(getFamily());

  useEffect(() => {
    console.log(getFamily());
    setFamily(getFamily());
  }, [getFamily]);

修改Family的页面代码 #

import { setFamily } from '../../utilities/family';
setFamily(responseJson.family);

Family工具类代码 #

let family = '';
export default family;
export function getFamily() {
  return family;
}
export function setFamily(f) {
  family = f;
}

问题原因&解决方法 #

1. useEffect依赖无效
   getFamily是固定的函数引用，组件渲染时这个引用不会变化，所以useEffect永远不会触发。而且直接修改全局变量family，React无法感知到这个变化，自然不会重新渲染组件。

2. 推荐：改用React Context做状态管理
   全局变量不是React推荐的状态管理方式，用Context可以让所有组件订阅状态变化，自动同步更新：

// familyContext.js
import { createContext, useContext, useState } from 'react';

const FamilyContext = createContext();

export function FamilyProvider({ children }) {
  const [family, setFamily] = useState('');

  return (
    <FamilyContext.Provider value={{ family, setFamily }}>
      {children}
    </FamilyContext.Provider>
  );
}

export function useFamily() {
  return useContext(FamilyContext);
}

• 在App组件外层包裹FamilyProvider，让所有子组件能访问Context
• MyFamily页面直接使用Context状态：

import { useFamily } from './familyContext';

export default function MyFamily({ navigation, props, person, inheritors }) {
  const { family } = useFamily();
  // 此时family会自动响应全局变化，无需手动监听
}

• 修改Family的页面直接调用Context的setFamily：

import { useFamily } from './familyContext';

// 组件内部
const { setFamily } = useFamily();
setFamily(responseJson.family);

3. 临时方案：用导航传参+页面聚焦监听
   如果只是简单场景，返回MyFamily时通过导航传递更新后的值：

• 修改页面跳转时：

navigation.navigate('MyFamily', { updatedFamily: responseJson.family });

• MyFamily页面监听页面聚焦和参数变化：

import { useFocusEffect } from '@react-navigation/native';
import React from 'react';

export default function MyFamily({ navigation, route }) {
  let [family, setFamily] = useState(getFamily());

  useFocusEffect(
    React.useCallback(() => {
      if (route.params?.updatedFamily) {
        setFamily(route.params.updatedFamily);
        // 可选：同步到全局变量
        setFamily(route.params.updatedFamily);
      } else {
        setFamily(getFamily());
      }
    }, [route.params])
  );
}

4. 不推荐：全局变量+页面聚焦监听
   如果坚持用全局变量，只能通过监听页面聚焦手动刷新：

import { useFocusEffect } from '@react-navigation/native';
import React from 'react';

export default function MyFamily({ navigation, props, person, inheritors }) {
  let [family, setFamily] = useState(getFamily());

  useFocusEffect(
    React.useCallback(() => {
      const newFamily = getFamily();
      console.log(newFamily);
      setFamily(newFamily);
    }, [])
  );
}

这种方式React无法追踪全局变量变化，仅能在页面聚焦时手动同步，存在同步延迟和性能隐患。

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