在Expo Router中实现页面返回时主页面刷新的方案问询

问题描述 #

使用React Native结合Expo-router开发移动应用，主页面展示内容，点击跳转至用户上传页面，调用router.back()返回主页面时，希望主页面能自动刷新以展示新上传的内容。尝试通过useContext Hook实现但未成功，附上相关代码请求排查或提供更优实现方案。

当前代码 #

MainScreen.tsx（负责refresh为true时更新内容） #

const { refresh, setUser, ...user } = useContext(UserContext); // Destructure the needed parts

const [feedData, setFeedData] = useState<any[]>([]);
const [deleteRefresh, setDeleteRefresh] = useState(false)
const [loading, setLoading] = useState(false)

useEffect(() => {
  setLoading(true);

  console.log("Use effect called with refresh: ", refresh);

  async function getFeedData() {
    const newFeed = await logFeedData();
    if (newFeed) {
      setFeedData(newFeed);
      setUser({refresh: false, ...user})
    } else {
      console.log("No new feed data");
    }
  }

  if (refresh) {
    getFeedData();
  }
  console.log("Now setting loading to false");
  setLoading(false);
}, [refresh]);

Broadcast.tsx（用户内容上传页面） #

const { refresh, setUser, ...user } = useContext(UserContext); // Destructure the needed parts

const BroadcastText: React.FC<BroadcastTextProps> = (setUpdated: any) => {

async function postFeedText(content: string, userId: string) {

  try {
    const response = await post({
    //uploads user data
    ).response;

    const jsonData = await response.body.json();
    console.log("POST body: ", jsonData)

    console.log("Setting user refresh value to true")

    setUser({...user, refresh: true})
    console.log("Refresh value: ", refresh)
    router.back()
    return;
  } catch (err) {
      console.log("err uploading text")
  }
}

_layout.tsx（顶层用户上下文定义） #

import { LogBox } from 'react-native';
import { Stack } from "expo-router"
import { useState, createContext, useEffect } from "react";
export { default as ReactFromModule } from 'react'

import { profileTheme } from './Theme.js';

type UserContextType = {
  userName: string,
  userEmail: string,
  userId: string,
  refresh: boolean,
  setUser: (user: Partial<UserContextType>) => void,
  profilePicPath: string,
  profilePicUrl: string
};

// Initialize with default values
const defaultContextValue: UserContextType = {
  userName: '',
  userEmail: '',
  userId: 'default',
  refresh: false,
  setUser: () => {},
  profilePicPath: '',
  profilePicUrl: ''
};

export const UserContext = createContext<UserContextType>(defaultContextValue);

export default function RootLayout() {
  const [user, setUser] = useState<UserContextType>(defaultContextValue);


  const handleSetUser = (userData: Partial<UserContextType>) => {
    console.log("Context has been called");
    setUser(prevUser => ({
      ...prevUser,
      ...userData
    }));
  };

  console.log("ROOT LAYOUT");

  return (
    <UserContext.Provider value={{ ...user, setUser: handleSetUser }}>
      <Stack screenOptions={{ headerShown: false }}>
        {/* Your screens */}
      </Stack>
    </UserContext.Provider>
  );
};

当前useContext方案的问题分析 #

• 闭包陷阱导致状态更新异常：Broadcast.tsx中setUser({...user, refresh: true})使用的user是组件挂载时的闭包值，并非最新上下文状态，可能导致状态更新不生效；同时router.back()可能在状态更新完成前执行，主页面无法捕捉到refresh变化。
• useEffect逻辑错误：MainScreen.tsx中setLoading(false)放在异步请求外部，会导致加载状态提前结束；重置refresh时同样存在闭包问题，可能覆盖其他用户状态。

修复当前useContext方案 #

1. 修正Broadcast.tsx的状态更新逻辑 #

使用函数式更新确保获取最新上下文状态：

async function postFeedText(content: string, userId: string) {
  try {
    const response = await post({
      // 上传逻辑
    }).response;
    const jsonData = await response.body.json();
    console.log("POST body: ", jsonData);

    // 函数式更新获取最新状态
    setUser(prev => ({...prev, refresh: true}));
    router.back();
  } catch (err) {
    console.log("err uploading text");
  }
}

2. 修正MainScreen.tsx的useEffect逻辑 #

useEffect(() => {
  async function getFeedData() {
    setLoading(true);
    try {
      const newFeed = await logFeedData();
      if (newFeed) {
        setFeedData(newFeed);
        // 函数式更新重置refresh
        setUser(prev => ({...prev, refresh: false}));
      } else {
        console.log("No new feed data");
      }
    } catch (err) {
      console.log("Error fetching feed data: ", err);
    } finally {
      setLoading(false);
    }
  }

  if (refresh) {
    getFeedData();
  }
}, [refresh]);

更优实现方案 #

方案1：使用Expo Router的useFocusEffect #

利用页面焦点触发刷新，无需维护refresh状态：

// MainScreen.tsx
import { useFocusEffect } from 'expo-router';

useFocusEffect(
  React.useCallback(() => {
    async function fetchFeed() {
      setLoading(true);
      try {
        const newFeed = await logFeedData();
        setFeedData(newFeed || []);
      } catch (err) {
        console.log("Fetch feed error: ", err);
      } finally {
        setLoading(false);
      }
    }
    fetchFeed();
  }, [])
);

方案2：使用React Query管理数据 #

借助React Query的自动缓存与重新获取机制，简化代码：

// MainScreen.tsx
import { useQuery } from '@tanstack/react-query';
import { useFocusEffect } from 'expo-router';

const { data: feedData, isLoading, refetch } = useQuery({
  queryKey: ['feed'],
  queryFn: logFeedData,
});

// 页面获得焦点时重新获取数据
useFocusEffect(
  React.useCallback(() => {
    refetch();
  }, [refetch])
);

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