React Native 屏幕返回时如何正确刷新数据？-js教程-PHP中文网

React Native 屏幕返回时如何正确刷新数据？

在 React Native 中，navigation.goBack() 不会触发目标屏幕的参数更新或重新渲染；需改用 navigation.navigate() 配合 merge: true 主动跳转并合并新参数，才能确保前屏（如 SiteScreen）及时响应数据变化。

在 react native 中，`navigation.goback()` 不会触发目标屏幕的参数更新或重新渲染；需改用 `navigation.navigate()` 配合 `merge: true` 主动跳转并合并新参数，才能确保前屏（如 sitescreen）及时响应数据变化。

在 React Native 的导航场景中，一个常见误区是认为调用 navigation.goBack() 后，通过 navigation.setParams() 设置的参数会自动同步到上一个屏幕——这是不正确的。setParams 仅影响当前路由对象的 params，而 goBack() 并不会重新挂载或刷新前一个屏幕，因此其 route.params 保持不变，useFocusEffect 或 useEffect 也无法捕获到更新。

✅ 正确做法：用 navigation.navigate() 替代 goBack()，主动“跳转回”目标页面，并传入最新数据：

// FormScreen.tsx —— 提交成功后
const saveChangesAsync = async () => {
  if (Object.keys(selectedValues).length === 0) {
    setHasError(true);
    return;
  }

  try {
    const response = await sendRating(selectedValues, site, user!._id);
    if (response.success && "newPlace" in response) {
      const updatedSite = { ...response.newPlace, nombre: "(Rated)" };
      console.log("Updated site sent back:", updatedSite.nombre);

      // ✅ 关键：用 navigate 回到 SiteScreen，并合并新参数
      navigation.navigate({
        name: "Site", // 必须与目标 Screen 的 name 一致（如 Stack.Navigator 中注册的名称）
        params: { site: updatedSite },
        merge: true, // ? 确保不覆盖其他已有 params，只合并指定字段
      });
    } else {
      console.warn("Rating submission failed:", response.message);
    }
  } catch (err) {
    console.error("Network error:", err);
  }
};

? 注意事项：

merge: true 是关键配置，它让导航器将新 params 与原 route.params 深度合并（而非完全替换），避免丢失其他未显式传递的参数；

目标屏幕（SiteScreen）需通过 route.params.site 获取数据，并配合 useFocusEffect 或 useEffect 响应参数变更：

vercel-react-best-practices

来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性

下载

// SiteScreen.tsx
const { site } = route.params as { site: SiteType };

useFocusEffect(
  useCallback(() => {
    console.log("Site updated to:", site.nombre);
    // ✅ 此处可触发 setState、refetch 关联数据、或更新 UI 状态
    // 注意：若 site 是引用类型，建议用 JSON.stringify(site) 作为依赖项防遗漏更新
  }, [JSON.stringify(site)]) // 更健壮的依赖写法（适用于嵌套对象）
);

若使用 @react-navigation/native@6.0+，确保 SiteScreen 已在 Stack.Screen 中正确注册 name="Site"，否则导航会失败；
❌ 避免在 goBack() 前使用 setTimeout 或 await 强行延迟——这无法解决参数同步问题，且易引发竞态。