React Native返回后SiteScreen不重新渲染问题求助

问题分析 #

同步提交时useFocusEffect能触发更新，是因为同步操作完成后页面立刻聚焦，同步逻辑能直接执行；但异步提交时API请求有延迟，可能页面回到SiteScreen后，异步操作才完成，此时useFocusEffect的初始触发已经结束，导致没拉取最新数据。下面是几个可行的解决方法：

1. 让useFocusEffect正确处理异步逻辑 #

useFocusEffect要求传入同步函数，需把异步逻辑包在useCallback里，确保每次页面聚焦时都重新执行异步请求：

import { useFocusEffect } from '@react-navigation/native';
import { useState, useCallback } from 'react';

function SiteScreen() {
  const [siteInfo, setSiteInfo] = useState({});

  useFocusEffect(
    useCallback(async () => {
      const fetchLatestSite = async () => {
        // 替换为你的API请求逻辑
        const res = await fetch(`/api/sites/${siteId}`);
        const data = await res.json();
        setSiteInfo(data);
      };
      await fetchLatestSite();
    }, [siteId]) // 加入必要依赖，比如站点ID，避免无意义重复请求
  );

  return (
    {/* 渲染站点信息 */}
  );
}

2. 表单提交后主动传递更新数据或触发刷新 #

在FormScreen的异步提交完成后，通过导航参数把更新后的站点数据传给SiteScreen，或者标记需要刷新：

// FormScreen的提交逻辑
const saveChangesAsync = async () => {
  const updatedSite = await yourApi.submitForm(formData);
  // 回退到SiteScreen并携带更新后的数据
  navigation.navigate('SiteScreen', { updatedSite });
};

然后在SiteScreen里监听导航参数变化，直接更新状态：

function SiteScreen({ route }) {
  const [siteInfo, setSiteInfo] = useState({});

  // 监听导航参数变化
  useEffect(() => {
    if (route.params?.updatedSite) {
      setSiteInfo(route.params.updatedSite);
    }
  }, [route.params]);

  return (
    {/* 渲染站点信息 */}
  );
}

3. 用状态管理工具共享数据 #

如果项目有状态管理（比如Context、Redux），可以把站点数据存在全局状态里，表单提交后直接更新全局状态，SiteScreen会自动同步：

// 创建SiteContext
import { createContext, useContext, useState } from 'react';

const SiteContext = createContext();

export function SiteProvider({ children }) {
  const [siteInfo, setSiteInfo] = useState({});

  const updateSite = (newInfo) => setSiteInfo(newInfo);

  return (
    <SiteContext.Provider value={{ siteInfo, updateSite }}>
      {children}
    </SiteContext.Provider>
  );
}

export const useSite = () => useContext(SiteContext);

在FormScreen里更新全局状态：

const { updateSite } = useSite();

const saveChangesAsync = async () => {
  const updatedSite = await yourApi.submitForm(formData);
  updateSite(updatedSite);
  navigation.goBack();
};

SiteScreen直接用全局状态渲染：

const { siteInfo } = useSite();

return (
  {/* 直接渲染siteInfo即可，状态更新会自动触发重渲染 */}
);

内容的提问来源于stack exchange，提问作者Sergio Maté Suárez