React Native 如何在if判断中调用Navigation实现页面跳转？

问题根因 #

你的代码存在三处导致功能不符合预期的问题：

• React的setState类更新方法是异步执行的，调用seterrorCounter(errorCounter+1)后立即读取errorCounter拿到的是更新前的旧值，无法正确判断错误次数是否触达阈值
• 跳转逻辑外层包裹了未执行的匿名箭头函数，navigation.navigate方法本身没有被调用，自然不会触发跳转
• 判断阈值设置错误，errorCounter >= 2对应连续2次输入错误就触发跳转，不符合你要求的连续3次错误跳转的需求

修正代码（直接判断版本） #

const checkPinCode = (a,b) => {
  if(arrayEquals(a,b)){
    alert("Login success")
    // 校验成功可以重置错误计数器
    seterrorCounter(0)
  } else {
    alert("Login Failed");
    // 先计算最新错误次数，直接用新值做判断避开异步问题
    const newErrorCount = errorCounter + 1
    seterrorCounter(newErrorCount)
    // 调整为3次错误触发跳转
    if (newErrorCount >= 3) {
      // 直接调用导航方法，不需要包裹匿名函数
      navigation.navigate('Wait')
    }
  }
}

更稳妥的优化方案（状态监听版本） #

如果要避免闭包导致的旧状态问题，也可以搭配useEffect监听错误次数自动触发跳转：

// 单独监听错误次数变化，只要达到阈值自动跳转
useEffect(() => {
  if(errorCounter >= 3) {
    navigation.navigate('Wait')
    // 跳转后重置错误计数器，避免下次进入页面直接触发跳转
    seterrorCounter(0)
  }
}, [errorCounter, navigation])

const checkPinCode = (a,b) => {
  if(arrayEquals(a,b)){
    alert("Login success")
    seterrorCounter(0)
  } else {
    alert("Login Failed");
    // 使用函数式更新避免闭包旧值问题
    seterrorCounter(prev => prev + 1)
  }
}

内容的提问来源于stack exchange，提问作者Code With Banchi