React Native开发：向Firestore写入时this.state未定义报错排查

你碰到的undefined is not an object (evaluating "this.state")错误，根源是Promise回调的this上下文丢失：

• 你在createUserWithEmailAndPassword的结果回调里，写了function(user){...}的普通匿名函数，这个函数内部的this不会绑定Register类的实例，严格模式下this值为undefined。只要你在这个回调里尝试读取this.state里存的用户输入值，就会触发这个报错。
• 哪怕你在构造函数里正确初始化了state，只要在非箭头函数的回调里访问this，就会丢失类实例的绑定关系。

• 当前写入Firestore的name字段取的是user2.displayName，但你创建Firebase用户时根本没有设置用户的displayName属性，这个字段永远为空，拿不到你在文本框里输入的姓名内容。
• 外层写的try/catch块只能捕获同步代码的错误，Firebase认证、写入Firestore都是异步Promise流程，这个try块根本捕获不到异步操作抛出的错误，相关错误会变成未处理的Promise rejection。
• 代码里渲染用到的Button2组件没有在导入列表中声明，页面依赖的styles样式表也没有实际的StyleSheet.create定义，这些遗漏会触发额外的运行异常。

• 把所有需要访问类实例上下文的Promise回调，全部改成箭头函数写法，箭头函数会自动继承外层作用域的this指向，不会丢失类实例绑定：

handleSignUp = () => {
  firebase.auth()
    .createUserWithEmailAndPassword(this.state.email, this.state.password)
    .then(() => {
      const currentUser = firebase.auth().currentUser;
      // 直接使用state里存储的用户输入姓名，不要读取空的displayName
      return firebase.firestore().collection('users').add({
        email: currentUser.email,
        name: this.state.name
      })
    })
    .catch((err) => {
      // 将异步错误捕获放到Promise链的catch块中，替代外层失效的try/catch
      this.setState({ errorMessage: err.message });
      Alert.alert('There is something wrong!', err.message);
    })
}

• 替换未定义的Button2组件：要么用React Native内置的Button组件替代，要么正确导入你自定义的Button2组件。
• 补全遗漏的styles样式对象，否则会因为找不到样式定义触发额外报错。

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