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

Question

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

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

从我目前阅读的内容来看，这取决于 userId 的值没有改变(我认为我需要围绕 useEffect() 做更多的阅读钩子(Hook)更好地理解，也许有人会帮助解决这个问题)

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() Hook ，导致无法看到我刚才的事件类型已创建(希望有意义).. 还请注意，之前在屏幕 1 中输入的任何数据仍然保留

我遇到过这个post这似乎是我正在处理的，只是有点不确定如何用我的设置来实现

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

谢谢

Answer 1

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

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

让我们重构代码如下:

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

注意: React.useCallback 是 useFocusEffect API 的一部分。 React Navigation 团队试图通过 memoization 优化屏幕性能。