Question

由于某种原因，我收到错误消息“ TypeError：_this2.setState不是函数”

在我的代码中：


import React, {useEffect, Component} from 'react';

import {View, Text} from 'react-native';
import firebase from '@react-native-firebase/app';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

class HomePageContent extends Component {
  state = {
    uData: [],
  };
  componentDidMount() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        var userID = firebase.auth().currentUser.uid;
        const db = firebase.firestore();

        let userDB = db.collection('Users').doc(userID);
        userDB
          .get()
          .then(doc => {
            if (!doc.exists) {
              console.log('No such document!');
            } else {
              let allUsers = [];
              let data = doc.data();
              let currentUser = data.fName;
              allUsers.push({
                currentUser,
              });
              this.setState({uData: allUsers});
            }
          })
          .catch(err => {
            console.log('Error getting document', err);
          });
      } else {
        // No user is signed in.
      }
    });
  }
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        {this.state.uData.map((value, index) => (
          <Text style={{fontSize: 25}}>Welcome {value.currentUser}</Text>
        ))}
      </View>
    );
  }
}

export default HomePageContent;

基本上，我只是尝试设置状态，然后在

中使用它

  <Text style={{fontSize: 25}}>Welcome {value.currentUser}</Text>

但是由于某种原因我遇到了错误。有什么想法吗？我正在像通常在reactJS中那样做，但这是本机的。

完整的错误是这样的：


Error getting document [TypeError: _this2.setState is not a function. (In '_this2.setState({
                  uData: allUsers
                })', '_this2.setState' is undefined)]

Answer 1

这里的问题是this上下文不是您所期望的。

使用函数语法创建回调方法时，将为this创建新作用域。而且，当您调用this.setState时，JS会在新创建的函数中寻找setState方法。

function(user) {
      ...
      // this refers to the functional context here
}

这可以通过使用箭头功能来解决。

firebase.auth().onAuthStateChanged((user) => {...}

箭头函数没有与this关键字的绑定。您可以详细了解here。由于该函数没有this上下文，它将自动引用具有this方法的父项setState。

解决此问题的另一种方法是使用函数并使用this手动绑定.bind。

Answer 2

在firebase.auth（）。onAuthStateChanged（（user）=> {上使用箭头功能，谢谢@ nipuna777

“ TypeError：_this2.setState不是函数” React Native

2 个答案: