Question

预期行为：

屏幕 A onclick 导航到屏幕 B -> 最后导航到屏幕 C
屏幕 C 将数据设置为异步存储 -> BackHandler 导航到屏幕 A
屏幕 A 检查状态的变化，并根据变化重新渲染屏幕

但是在我重新加载或手动进行任何更改之前，屏幕 A 不会重新渲染

屏幕 A useffect() 代码：

const [nutrition_assessment_age, setnutritionassessmentage] = useState(null);
useEffect(() => {
    console.log('nutri assess age', nutrition_assessment_age);
    getNutritionAssessmentage();
    getHomeTabMainAPI();
    if (isValidObject(User) && isValidObject(mSChildId)) {
      if (loadApi == true) {
        getHomeTabMainAPI();
        setLoadApi(false);
        setSelectedChild(getChildFromUserChildrenList());
      }
    } else {
      if (!isValidObject(User) || !isValidObject(mSChildId)) {
        getUserData();
      }
    }
  }, [User, mSChildId, loadApi, nutrition_assessment_age]);

屏幕 C 反处理程序代码：

useEffect(() => {
    retreiveData();
    BackHandler.addEventListener('hardwareBackPress', handleBackButtonOnnclick);
    return () => {
      BackHandler.removeEventListener(
        'hardwareBackPress',
        handleBackButtonOnnclick,
      );
    };
  }, []);
function handleBackButtonOnnclick() {
    storeData();
    navigation.navigate('Home', {
      screen: 'Home',
      params: {
        assessment_age: assessment_age,
      },
    });
    return true;
  }

const storeData = async () => {
    try {
      await AsyncStorage.setItem(
        'assessment_age',
        assessment_age.toString(),
      ).then(
        console.log('assessment age stored -->', assessment_age.toString()),
      );
    } catch (e) {
      console.log('assessment age store error--->', e);
    }
  };

希望我已经澄清了我的问题，即屏幕 A 中的 Nutrition_assessment_age 的每次变化我想重新渲染屏幕

请告诉我如何才能做到这一点。有点卡很久了。任何线索都会很棒。

根据建议，如果我可以将 useEffect 设置为

React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      console.log('nutri ass age', nutrition_assessment_age);
      getNutritionAssessmentage();
      
      if (isValidObject(User) && isValidObject(mSChildId)) {
        if (loadApi == true) {
          getHomeTabMainAPI();
          setLoadApi(false);
          setSelectedChild(getChildFromUserChildrenList());
        }
      } else {
        if (!isValidObject(User) || !isValidObject(mSChildId)) {
          getUserData();
        }
      }
    });

    return unsubscribe;
  }, [User, mSChildId, loadApi, nutrition_assessment_age,navigation]);

显示为空白，未获取数据

Answer 1

我会使用 react-navigation 生命周期方法，看看它们 here。

我在使用 react-navigation 时遇到过和你一样的麻烦，因为 react 生命周期不会在导航更改时触发，因此我会诉诸于应用这个：

示例：

尝试将其应用于屏幕 A：

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

function ScreenA() {
  useFocusEffect(
    React.useCallback(() => {
      // Screen A is focused, initialize the state, or do whatever checking you need.

      return () => {
        // Screen A is unfocused, clear the state, clear async storage, or whatever you need
      };
    }, [])
  );

  return <div>Screen A!</div>;
}

您也可以像这样将其应用于 react 的钩子：

function ScreenA({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
    });

    return unsubscribe;
  }, [navigation]);

  return <div>Screen A!</div>;
}

当我从屏幕 B 返回屏幕 A 时，如何重新渲染屏幕 A？

1 个答案:

示例：