导航回屏幕时不会调用 useEffect - React Navigation

我有一个屏幕，可以调用 api 来获取一些数据，然后显示

我看到的一个问题是，当我离开屏幕（我使用的是 React-navigation 6.x）然后返回到屏幕时useEffect()没有被调用

从我到目前为止读到的内容来看，这取决于userId不改变（我想我需要多读一些书useEffect()挂钩以更好地理解，也许有人会帮助解决这个问题）

import React, {useState, useEffect, useContext} from 'react';
import AppContext from '../../components/AppContext.js';

export const CreateNewEvent = () => {
  const globalContext = useContext(AppContext);
  const userId = globalContext.userInfo.id;

  useEffect(() => {
    const body = JSON.stringify({userId});
    fetch(eventTypesUrl, {
      method: 'POST',
      headers: {'Content-Type': 'application/json', Accept: 'application/json'},
      body: body,
    })
      .then(response => response.json())
      .then(json => setEventTypeData(json))
      .catch(error => console.error(error))
      .finally(() => setLoading(false));
    }, [userId]);

}

所以在我的场景中，我位于屏幕 1（在这里我可以创建一个事件，该事件发出请求以获取所有事件类型并将它们加载到选择菜单中）

当我导航到屏幕 2（以创建事件类型）然后返回屏幕 1 时，useEffect()未调用钩子，导致无法看到我刚刚创建的事件类型（希望这是有意义的）..还请注意，之前在屏幕 1 中输入的任何数据仍然保留

我遇到过这个post https://stackoverflow.com/questions/60182942/useeffect-not-called-in-react-native-when-back-to-screen这似乎就是我正在处理的问题，只是有点不确定如何使用我的设置来实现

如何确保当我返回时屏幕 2 进行 api 调用并且所有以前的表单数据都被清除？

Thanks

从本质上讲，当用户导航回该屏幕时，React Navigation 不会重新渲染屏幕以优化性能，并避免不必要的重新渲染。

当需要时，它们提供了一个有用的钩子来检测屏幕何时聚焦并运行一些副作用。

让我们重构代码如下：

Top-level import 
import { useFocusEffect } from "@react-navigation/core";

// Run side effects when screen focused, navigated, or visited 

useFocusEffect(
  React.useCallback(() => {
    const body = JSON.stringify({ userId });
    fetch(eventTypesUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
      body: body,
    })
      .then(response => response.json())
      .then(json => setEventTypeData(json))
      .catch(error => console.error(error))
      .finally(() => setLoading(false));

    return () => {
      // Run  somelogisx when user leave screen,
      // Cleaning caches or cancelling subscriptions
    };
  }, [userId]),
);

Note: React.useCallback是其一部分useFocusEffectAPI。 React Navigation 团队尝试通过记忆来优化屏幕性能。