React挂钩/生命周期导航React原生

Question

我正试图使用react hooks useEffect从reducer存储加载我存储的数据。我注意到，每次第一次启动屏幕时，useEffect都能正常工作。但是，当它在运行navigation.goBack后获得焦点时，钩子不会再次运行。我的疑问是，应用程序的状态发生了变化，react钩子是否应该不理解这一点？

const diaryData = useSelector(({diaryState}) => diaryState.data);
const diaryIndex = useSelector(({diaryState}) => diaryState.index);
const [diary, setDiary] = useState(diaryData[diaryIndex]);
useEffect(() => {
// log is only displayed the first time, when you return with navigation.goBack, it does not work.
console.log('im here');
loadDiary();
});
const loadDiary = () => {
setLoad(true);
setDiary(diaryData[diaryIndex]);
setLoad(false);
};

正在更改redux存储状态。数据使用：

diary.growDimens = growDimens;
diary.lightingType = lightingType;
diary.lumens = lumens;
diaryData[diaryIndex] = diary;
dispatch(diaryFetchSuccess(diaryData));

Answer 1

当您使用navigation.goBack()时，useEffect的React生命周期不会像那样工作。执行此操作时，页面将替换stack的顶层，也就是说，当您使用navigation.navigate()转到下一页时。一个页面被添加到堆栈中，并被navigation.goBack()替换。这就像闭上眼睛，睁开眼睛。

如果您真的希望loadDiary()在通过navigation.goBack()返回页面时发挥作用，请使用以下两种方法之一：

• useFocusEffect[最受欢迎]：有时我们希望在屏幕聚焦时产生副作用。副作用可能涉及添加事件侦听器、获取数据、更新文档标题等。虽然使用focus和blur事件可以实现这一点，但这不是很符合人体工程学。

• B Mohammed建议的。您可以使用focus侦听器。只需使用道具中的navigation，或使用导航挂钩进行navigation即可。代码如下：

const navigation = useNavigation();
const loadDiary = () => {
setLoad(true);
setDiary(diaryData[diaryIndex]);
setLoad(false);
};
useEffect(() => {
const unsubscribe = navigation.addListener('focus', event => {
// This will be triggered, whenever your component is active
console.log("I'm here");
loadDiary();
});
return unsubscribe;
}, [navigation]);

请注意：在任何情况下都不要再使用任何其他useEffect()，除非一次，因为当您第一次进入页面或从navigation.goBack((时，focus将负责调用loadDiary()

如果你想了解如何使用其他事件监听器，请查看以下链接：导航事件

Answer 2

尝试使用导航侦听器：

useEffect(() => {
const unsubscribe = porps.navigation.addListener('focus', () => {
loadDiary();
});
return unsubscribe;
}, [props.navigation]);