React钩子/生命周期导航React本机

Question

我试图使用react从还原器存储中加载我存储的数据。我注意到，每次屏幕第一次启动时，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商店state.data：

 diary.growDimens = growDimens;
 diary.lightingType = lightingType;
 diary.lumens = lumens;

 diaryData[diaryIndex] = diary;
 dispatch(diaryFetchSuccess(diaryData));

Answer 1

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

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

• useFocusEffect 最喜欢的：有时当屏幕聚焦时，我们想要运行副作用。副作用可能包括添加事件侦听器、获取数据、更新文档标题等。虽然这可以使用focus和blur事件来实现，但这并不是非常符合人体工程学的。
• 这是B穆罕默德的建议。您可以使用focus侦听器。只需使用道具中的navigation或navigation使用useNavigation钩子即可。代码是这样的：

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]);