如何每次进入页面时重置React Navigation路由参数？

我有一个Cart页面，可导航至带WebView处理支付的Checkout页面。Checkout会根据URL状态导航回Cart，并传入paymentStatus参数，Cart需据此显示支付提示。为避免首次进入报错，已在Cart的Stack Screen设置initialParams={{paymentStatus: false}}。

首次支付完成后，paymentStatus能正常传递并显示提示，但切换到其他页面再返回Cart时，参数仍保留上次的支付状态，无法重置。尝试用useState存参数、useEffect调用提示函数都没用，旧值一直保留。

问题根源 #

1. React Navigation的route.params在页面被复用（比如从其他页面返回）时不会自动重置，除非显式更新
2. 直接修改statusCheckOut变量不会触发组件重新渲染，也无法真正修改路由参数
3. navigation.setOptions是设置页面导航栏选项的，和路由参数route.params完全无关，所以之前的重置操作无效

解决方案 #

用useState同步路由参数，在页面聚焦时监听参数变化，显示提示后立即重置路由参数：

修改后的Cart组件代码 #

export default function Cart({ route, navigation }) {
  // 用state同步paymentStatus，初始值取路由参数
  const [paymentStatus, setPaymentStatus] = useState(route.params.paymentStatus);
  const [cart, setCart] = useState(null);
  const [products, setProducts] = useState(null);
  const [reloadCart, setReloadCart] = useState(false);
  const [addresses, setAddresses] = useState(null);
  const [selectedAddress, setSelectedAddress] = useState(null);
  const [totalPayment, setTotalPayment] = useState(null);
  const { auth } = useAuth();

  useFocusEffect(
    useCallback(() => {
      // 每次页面获得焦点时，同步最新的路由参数
      const currentStatus = route.params.paymentStatus;
      setPaymentStatus(currentStatus);

      setCart(null);
      setAddresses(null);
      setSelectedAddress(null);

      loadCart();
      loadAddresses();
    }, [route.params.paymentStatus])
  );

  useEffect(() => {
    // 当paymentStatus有效时，显示提示并立即重置参数
    if (paymentStatus && paymentStatus !== false) {
      showPaymentStatus();
      // 重置路由参数，避免下次进入时保留旧值
      navigation.setParams({ paymentStatus: false });
      // 同步更新本地state
      setPaymentStatus(false);
    }
  }, [paymentStatus, navigation]);

  useEffect(() => {
    reloadCart && loadCart();
  }, [reloadCart]);

  const loadCart = async () => {
    const response = await getProductCartApi();
    setCart(response);
  };

  const loadAddresses = async () => {
    const response = await getAddressesApi(auth);
    setAddresses(response.data);
  };

  const showPaymentStatus = () => {
    const paymentAttributes = {
      approved: {
        title: "¡It's approved!",
        type: ALERT_TYPE.SUCCESS,
        textBody: "Your payment has been approved",
      },
      rejected: {
        title: "¡Payment rejected!",
        type: ALERT_TYPE.DANGER,
        textBody: "Your payment has been rejected by the bank",
      },
      pending: {
        title: "¡Processing",
        type: ALERT_TYPE.WARNING,
        textBody: "Your payment is pending",
      },
    };
    Toast.show({
      type: paymentAttributes[paymentStatus].type,
      title: paymentAttributes[paymentStatus].title,
      textBody: paymentAttributes[paymentStatus].textBody,
      autoClose: 3000,
    });
  };
}

关键修改点 #

• 用useState存储paymentStatus，确保状态变化能触发组件重新渲染
• 在useFocusEffect中监听路由参数，每次页面聚焦时同步最新状态
• 新增useEffect监听paymentStatus变化，显示提示后通过navigation.setParams真正重置路由参数
• 移除原代码中无效的navigation.setOptions和直接修改变量的操作

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