使用react-navigation跳转路由时接收错误参数的问题

这个问题我之前也碰到过！核心原因是React Navigation为了性能优化，会复用已经渲染过的路由组件实例，而不是每次跳转都重新创建。所以你第一次带参数跳转到profile时，componentWillMount会执行并设置状态；但返回后再无参数跳转时，组件根本没被卸载重新挂载，componentWillMount不会再次触发，自然就保留了之前的参数值。

下面给你几个针对类组件的实用解决方案：

方案1：用componentDidUpdate监听参数变化 #

把状态更新的逻辑拆分出来，除了在初始化时执行，还要在组件更新时对比前后的路由参数，有变化就同步更新状态：

componentWillMount() {
  this.updateStateFromParams();
}

componentDidUpdate(prevProps) {
  // 对比当前和上一次的参数，不一样就更新
  const currentParam = this.props.navigation.getParam('yourParam', null);
  const prevParam = prevProps.navigation.getParam('yourParam', null);
  if (currentParam !== prevParam) {
    this.updateStateFromParams();
  }
}

// 抽离复用的状态更新逻辑
updateStateFromParams() {
  const param = this.props.navigation.getParam('yourParam', null);
  this.setState({
    // 根据你的需求设置默认值
    targetState: param || '默认值'
  });
}

方案2：监听didFocus聚焦事件 #

每次组件被聚焦（比如从其他页面返回再进入）时，重新读取最新的路由参数：

componentDidMount() {
  // 注册聚焦监听
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    this.updateStateFromParams();
  });
}

componentWillUnmount() {
  // 组件卸载前移除监听，防止内存泄漏
  this.focusListener.remove();
}

updateStateFromParams() {
  const param = this.props.navigation.getParam('yourParam', null);
  this.setState({
    targetState: param || '默认值'
  });
}

额外提示（针对React Navigation 5+版本） #

如果后续你迁移到了函数组件，推荐用useFocusEffect钩子，它专门处理这种聚焦时更新的场景：

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

function ProfileScreen({ route }) {
  const [targetState, setTargetState] = useState('默认值');

  useFocusEffect(
    useCallback(() => {
      // 每次聚焦时获取最新参数
      const param = route.params?.yourParam || null;
      setTargetState(param || '默认值');
    }, [route.params])
  );

  return (
    // 你的组件UI
  );
}

另外要注意：如果你的React Navigation版本比较新，getParam已经被废弃了，直接用this.props.route.params（类组件）或者route.params（函数组件）来获取参数就好。

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