React Native Firebase修改密码功能无法捕获错误、返回页无法清空输入框问题

• 根本原因：try/catch仅能捕获同步运行时异常，你调用的Firebase认证方法均为异步Promise，异步抛出的错误无法被外层同步try/catch捕获；同时原有代码存在Promise链式调用语法错误、括号不匹配问题，也会导致逻辑异常。
• 修复方案：改用async/await语法配合try/catch捕获异步错误，同时可以通过错误码匹配你需要的异常场景：

ChangePassword = async () => {
  if(this.state.currentPassword === "" || this.state.newPassword === "") {
    alert("所有字段为必填项")
    return
  }
  try {
    // 等待重认证完成
    await this.reauthenticate(this.state.currentPassword)
    const user = firebase.auth().currentUser
    // 等待密码更新完成
    await user.updatePassword(this.state.newPassword)
    alert("密码修改成功")
    firebase.database().ref(user.uid)
    this.props.navigation.navigate('Home', {user})
    // 操作成功后清空输入框
    this.setState({
      newPassword: '',
      currentPassword: ''
    })
  } catch (error) {
    console.log(error)
    // 可通过error.code判断具体错误类型
    if(error.code === 'auth/wrong-password') {
      alert("当前密码输入错误")
    } else if(error.code === 'auth/operation-not-allowed') {
      alert("用户未设置密码")
    } else {
      alert(error.message)
    }
  }
}

• 根本原因：类组件constructor仅在组件首次初始化时执行，若修改密码页面未被销毁（比如压在React Navigation导航栈中，从下一级页面返回时），组件不会重新初始化，原有state值不会被重置。
• 修复方案：监听页面聚焦事件，每次页面显示时主动清空state：

// 在类组件中添加生命周期方法
componentDidMount() {
  // 监听页面聚焦事件，新版React Navigation请将事件名改为'focus'
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    this.setState({
      newPassword: '',
      currentPassword: ''
    })
  })
}

componentWillUnmount() {
  // 移除监听避免内存泄漏
  this.focusListener?.remove()
}

• 补充说明：原有代码中setState放在ChangePassword函数末尾同步执行，会出现异步请求还没完成就清空输入框的问题，修复后的代码已经调整到操作成功后再执行清空。

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