当我从屏幕B返回屏幕A时，如何重新显示屏幕A

Question

预期行为：

• 点击屏幕A导航到屏幕B->最终导航到屏幕C
• 屏幕C将数据设置为异步存储->BackHandler导航到屏幕A
• 屏幕A检查状态的变化，用变化重新显示屏幕

但是在我重新加载或手动更改之前，屏幕A不会重新投标

屏幕A使用效果((代码：

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中营养评估的每一次变化，我想重新发布屏幕

请让我知道我该怎么做。有点太久了。任何线索都会很棒。

根据建议，如果我可以使用效果到

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生命周期方法，请在此处查看。

在使用react导航时，我也遇到过与您相同的麻烦，因为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>;
}