React Native中无法用Firebase数据设置userType状态问题求助

我来帮你搞定这个问题！你遇到的问题主要有3个关键点，咱们逐个修正：

问题1：回调函数的this指向错误 #

你在Firebase的on回调里用了普通的function，这会导致函数内部的this不再指向组件实例，自然找不到setState方法。解决办法是把回调改成箭头函数，这样this会继承外层组件的上下文。

问题2：setState的写法错误 #

你写成了this.setState=({userType:snapshot.val()})——这是把setState当成变量赋值了！正确的写法是调用setState方法，传一个状态对象作为参数：this.setState({userType: snapshot.val()})。

问题3：异步操作的时机问题 #

Firebase的数据库查询是异步的，你在readUserData里直接alert(this.state.userType)，这行代码会在数据库返回数据之前就执行，所以看到的还是初始的'f'。如果要验证状态是否更新，要么把alert放在setState的回调里，要么在render里渲染这个状态值。

修改后的完整代码 #

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image } from 'react-native';
import * as firebase from 'firebase';

export default class Home extends React.Component {
  constructor(props){
    super(props)
    this.state=({
      userId:firebase.auth().currentUser.uid,
      userType:'f'
    })
  }

  componentDidMount() {
    this.readUserData();
  };

  readUserData=()=> {
    const userstype= 'users/'+ this.state.userId + '/userType'
    // 改成箭头函数，保证this指向组件实例
    firebase.database().ref(userstype).on('value', (snapshot) => {
      // 正确调用setState方法
      this.setState({userType:snapshot.val()}, () => {
        // setState的回调函数，这里能拿到更新后的状态
        alert(this.state.userType)
      })
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.titleText}>Taams</Text>
        <Text style={styles.edition}>Developer's Edition</Text>
        <Text style={styles.titleText}>Home</Text>
        <Text>Alpha 0.0.0.1</Text>
        {/* 在render里渲染userType，实时查看状态变化 */}
        <Text>当前用户类型：{this.state.userType}</Text>
      </View>
    )
  }
}

另外，给userstype加上const声明可以避免它变成全局变量，这是个值得保持的编码好习惯~

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