React Native Stack Navigator返回上屏时如何阻止useEffect重复执行？

以下几种方案可以满足你的需求——既保留按需触发getList()的能力，又能在从详情页返回列表页时不重复请求数据：

方案1：添加刷新状态标记，区分首次加载和手动触发刷新 #

在列表页新增一个状态变量控制是否需要执行getList()，首次加载后关闭自动刷新，只有手动触发（比如下拉刷新、刷新按钮）时才重新请求：

import { useIsFocused } from '@react-navigation/native';
import { useState, useEffect } from 'react';

const ListScreen = ({ navigation }) => {
  const [dataList, setDataList] = useState([]);
  const [shouldRefresh, setShouldRefresh] = useState(true); // 标记是否需要刷新
  const isFocused = useIsFocused();

  useEffect(() => {
    // 只有页面聚焦且需要刷新时才请求数据
    if (isFocused && shouldRefresh) {
      const fetchData = async () => {
        const data = await getList();
        setDataList(data);
        setShouldRefresh(false); // 请求完成后关闭自动刷新标记
      };
      fetchData();
    }
  }, [isFocused, shouldRefresh]);

  // 手动触发刷新的方法（可绑定到下拉刷新或按钮点击）
  const triggerManualRefresh = () => {
    setShouldRefresh(true);
  };

  return (
    <FlatList
      data={dataList}
      onRefresh={triggerManualRefresh} // 下拉刷新触发
      refreshing={shouldRefresh}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        // 列表项渲染，点击跳转到详情页
        <TouchableOpacity onPress={() => navigation.navigate('Detail', { item })}>
          <Text>{item.title}</Text>
        </TouchableOpacity>
      )}
    />
  );
};

这个方案逻辑简单，不需要额外依赖，适合单页面独立管理数据的场景。

方案2：利用全局状态缓存数据 #

把列表数据放到全局状态（比如React Context、Zustand、Redux）中，列表页优先从缓存读取数据，只有缓存为空或手动触发时才请求Firebase：

以React Context为例：

// 1. 创建数据Context
import { createContext, useContext, useState } from 'react';

const ListDataContext = createContext();

export const ListDataProvider = ({ children }) => {
  const [listData, setListData] = useState(null);

  // 封装数据请求方法
  const fetchListData = async () => {
    const data = await getList();
    setListData(data);
  };

  return (
    <ListDataContext.Provider value={{ listData, fetchListData }}>
      {children}
    </ListDataContext.Provider>
  );
};

// 2. 在列表页中使用Context
const ListScreen = ({ navigation }) => {
  const { listData, fetchListData } = useContext(ListDataContext);
  const [isRefreshing, setIsRefreshing] = useState(false);

  // 首次加载：缓存为空时请求数据
  useEffect(() => {
    if (!listData) {
      fetchListData();
    }
  }, [listData, fetchListData]);

  // 手动触发刷新
  const handleRefresh = async () => {
    setIsRefreshing(true);
    await fetchListData();
    setIsRefreshing(false);
  };

  return (
    <FlatList
      data={listData || []}
      onRefresh={handleRefresh}
      refreshing={isRefreshing}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => navigation.navigate('Detail', { item })}>
          <Text>{item.title}</Text>
        </TouchableOpacity>
      )}
    />
  );
};

这种方案适合需要在多个页面共享列表数据的场景，即使页面重新渲染，只要缓存有数据就不会重复请求。

方案3：监听导航事件，精准控制刷新时机 #

通过React Navigation的导航事件监听，判断页面聚焦的来源，只有从非详情页进入时才刷新，从详情页返回时跳过：

import { useNavigation } from '@react-navigation/native';
import { useState, useEffect } from 'react';

const ListScreen = ({ navigation }) => {
  const [dataList, setDataList] = useState([]);
  const [hasLoaded, setHasLoaded] = useState(false);
  const nav = useNavigation();

  useEffect(() => {
    // 首次加载数据
    if (!hasLoaded) {
      getList().then(data => {
        setDataList(data);
        setHasLoaded(true);
      });
    }

    // 监听页面聚焦事件
    const unsubscribe = nav.addListener('focus', () => {
      // 判断上一个页面是否是详情页，不是则刷新
      const prevRoute = nav.getState().routes[nav.getState().index - 1]?.name;
      if (prevRoute !== 'Detail') {
        getList().then(data => setDataList(data));
      }
    });

    return unsubscribe;
  }, [nav, hasLoaded]);

  // 手动刷新方法
  const triggerRefresh = () => {
    getList().then(data => setDataList(data));
  };

  return (
    <FlatList
      data={dataList}
      onRefresh={triggerRefresh}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => navigation.navigate('Detail', { item })}>
          <Text>{item.title}</Text>
        </TouchableOpacity>
      )}
    />
  );
};

这个方案适合对导航场景有精细控制需求的情况，但需要注意导航栈的状态判断逻辑。

内容的提问来源于stack exchange，提问作者ruwanmadhusanka