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

Question

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

我看到的一个问题是当我离开屏幕时（我正在使用反应导航 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 上（在这里我可以创建一个事件，它发出请求以获取所有事件类型并将它们加载到 select 菜单中）

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

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

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

谢谢

Answer 1

React Navigation 的核心是，当用户导航回该屏幕以优化性能时，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]))

注：React.useCallback是useFocusEffectAPI的一部分。 React Navigation 团队尝试通过记忆优化屏幕性能。

Answer 2

在 React Native 中，当您向前导航时，每个屏幕都会被推送到导航堆栈。

现在，当您向后导航时，会弹出上一个屏幕并显示堆栈中的最顶层屏幕。由于最顶层屏幕中没有任何内容（状态或道具）发生变化，因此不会重新渲染。

所以你必须做一些手工工作。

import { useIsFocused } from "@react-navigation/native";


const isFocused = useIsFocused();

isFocused 是布尔值

useEffect(() => {

 if (userId && isFocused) {
   // Code which you want to execute when screen is loaded first 
   // time(and after userId is initialised) or loaded after press of 
   // back button     
 }
 
    
}, [userId, isFocused]);

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

useEffect is not called when navigating back to screen - React Navigation

navigation

react-native

react-navigation-v6