React Native 调用API提交表单时跨页面导航及Toast提示实现问题

通用处理方案 #

这类跨页面的提交状态联动场景，核心原则是状态作用域最小化+一次性事件通知机制，避免用全局持久化状态存储临时的提交结果，通用实现思路有两种：

方案1：路由传参（最简单，适合轻量场景） #

提交成功后调用路由跳转方法时携带成功标识，页面A只在从B返回且拿到成功标识时触发Toast，完全不需要把提交状态存在全局reducer里：

• 页面B提交成功时，按你使用的路由库规则传参即可，React Navigation可以写为props.navigation.navigate('PageA', { submitSuccess: true })，如果要保留页面A之前的状态，也可以用带参数的goBack实现
• 页面A监听路由参数变化，拿到submitSuccess === true时弹出Toast，之后立刻清空路由参数避免重复触发

方案2：全局事件总线/一次性通知机制 #

适合多页面可能联动的复杂场景，用发布订阅模式做临时通知，通知消费后自动销毁，不会留下持久化状态导致重渲染：

• 提交成功时发布一次性的formSubmitSuccess事件
• 页面A在mount时订阅该事件，收到通知后弹Toast，unmount时取消订阅

现有实现优化点 #

你当前的代码核心问题是把临时的提交请求状态存在了全局reducer里，且状态重置逻辑和渲染逻辑耦合，导致不必要的重渲染和状态错乱，可以从以下几个方向修改：

1. 精简reducer状态，移除不必要的全局状态 #

你现在的3个提交相关状态不需要全部存在全局，仅保留请求中状态控制Loading展示即可：

// 优化后reducer结构
{
  formSubmitting: false // 仅标识是否正在提交，请求结束后立刻重置
}

请求成功/失败的结果不需要存在全局，直接在提交的异步逻辑里分支处理即可，避免全局状态变动触发无关页面重渲染。

2. 调整页面B的逻辑，把状态判断移到useEffect里，不要在渲染函数里执行状态更新和跳转 #

你当前在渲染函数里直接调用setShowErrorFormSubmitToast、navigation.goBack属于违规操作，会导致重复渲染和状态异常：

// 页面B优化后核心代码
const [showErrorToast, setShowErrorToast] = useState(false);
const { formSubmitting } = props.teacher;

// 监听提交状态变化，处理请求结束后的逻辑
useEffect(() => {
  // 仅当提交从进行中变为结束时触发
  if (!formSubmitting) return;
  // 从提交异步请求的回调/结果里拿返回状态即可
  const submitRes = 你的提交请求返回结果;
  if (submitRes.success) {
    // 成功跳转时带参数
    props.navigation.navigate('PageA', { submitSuccess: true });
  } else {
    setShowErrorToast(true);
  }
  // 重置提交状态
  props.handleCreateFormSubmitDown();
}, [formSubmitting, props.navigation]);

// 错误toast处理逻辑不变
useEffect(() => {
  if (showErrorToast) {
    Toast.show({
      type: 'error',
      text1: 'Error',
      text2: 'Could not submit.',
      topOffset: ResponsiveSize(0),
      onHide: () => setShowErrorToast(false)
    });
  }
}, [showErrorToast]);

// 仅在提交中时展示Loading
if (formSubmitting) {
  return <Loading msg="Submitting form..." />;
}
// 剩下的表单渲染逻辑不变

3. 页面A只监听路由参数触发Toast，不需要监听全局reducer状态 #

// 页面A优化后核心代码
const route = useRoute();
const [showSuccessToast, setShowSuccessToast] = useState(false);

useEffect(() => {
  // 仅当从B返回拿到submitSuccess参数时触发
  if (route.params?.submitSuccess) {
    setShowSuccessToast(true);
    // 立刻清空路由参数，避免下次进入页面重复触发
    props.navigation.setParams({ submitSuccess: undefined });
  }
}, [route.params, props.navigation]);

useEffect(() => {
  if (showSuccessToast) {
    Toast.show({
      type: 'success',
      text1: 'Success',
      text2: 'Successfully submitted.',
      onHide: () => setShowSuccessToast(false)
    });
  }
}, [showSuccessToast]);

4. 特殊场景补充：如果必须用全局状态存结果，加消费标识 #

如果你的场景确实需要把提交结果存在全局，可以给状态加一个consumed标识，消费后标记为已消费，避免重复触发：

// 适配特殊场景的reducer结构
{
  formSubmitting: false,
  submitSuccess: null, // null=未提交，true=成功，false=失败
  submitResultConsumed: false // 是否已经被消费过
}
// 成功action里设置submitSuccess: true, submitResultConsumed: false
// 消费完后触发action把submitResultConsumed设为true，页面只有在submitResultConsumed为false时才处理结果

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