React Navigation导航参数更新问题：同页面不同传参渲染异常

我来帮你搞定这个导航传参的问题哈！你的场景很明确：两个<Touchable />导航到同一个Worklogs页面，一个没带showPending参数导致<PendingWorklogList />不渲染，另一个带了参数就正常显示。核心问题是当参数不存在时，你的判断逻辑没有处理默认状态，下面给你两种靠谱的解决办法：

方法一：在Worklogs页面内部设置参数默认值 #

这种方式更健壮，能避免后续其他导航入口忘记传参的情况。在render方法里给showPending设置一个默认的布尔值，确保不管有没有传参，判断逻辑都能正常工作：

render() {
  // 使用空值合并运算符（??）给参数设置默认false，兼容undefined的情况
  const showPending = this.props.showPending ?? false;
  
  return (
    <div>
      {/* 页面其他内容 */}
      {/* 现在不管参数传没传，都能正确判断是否渲染组件 */}
      {showPending && <PendingWorklogList />}
    </div>
  );
}

如果你的项目还不支持ES2020的空值合并运算符，也可以用逻辑或（||）或者三元表达式替代：

// 逻辑或写法（注意如果参数可能传0之类的假值要慎用）
const showPending = this.props.showPending || false;

// 三元表达式写法，更严谨
const showPending = typeof this.props.showPending !== 'undefined' ? this.props.showPending : false;

方法二：统一所有导航的参数传递 #

直接给第一个<Touchable />的导航逻辑也加上showPending参数，让两个导航的传参逻辑保持一致，这样页面里的判断就不用额外处理默认值了：

// 第一个Touchable（需要隐藏PendingWorklogList的情况）
<Touchable onPress={() => navigation.navigate('Worklogs', { showPending: false })}>
  {/* 你的按钮内容 */}
</Touchable>

// 第二个Touchable（需要显示PendingWorklogList的情况）
<Touchable onPress={() => navigation.navigate('Worklogs', { showPending: true })}>
  {/* 你的按钮内容 */}
</Touchable>

两种方法都能解决你的问题，推荐第一种，因为它能让Worklogs页面的逻辑更独立，不用依赖外部导航的传参规范～

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