javascript - React Native 第二次访问屏幕时 null is not a object (evaluating '_this2.state.data') 错误

Question

我使用以下代码成功呈现我的 Firebase 数据库查询。

class WeightHistoryScreen extends Component {
componentWillMount = () => {
    this.setState({ data: [] });
    this.getData();
  }

  getData(){
    const { currentUser } = firebase.auth();
    firebase
      .database()
      .ref(`/users/${currentUser.uid}/data/`)
      .orderByKey()
      .on('child_added', snap =>  {
        var data = this.state.data;
        data.push({ key: snap.key, weight: snap.val().Weight });
        this.setState({ data: data });
      }) 
  }

renderRow = ({item}) => {
  return (
    <View style={[styles.card, styles.cardBorder]}>
      <Text>
        {item.key}
      </Text>
      <Text style={[styles.textRight]}>
        {item.weight} LBS
      </Text>
    </View>
  )
}

  render() {
    return (
      <View style={[styles.container]}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderRow} 
        />
      </View>
    );
  }
}

但是，在同一 session 中第二次访问屏幕时出现错误。请参阅下面的屏幕截图。

Answer 1

您在错误的位置初始化了状态，请尝试这样做

class WeightHistoryScreen extends Component {
state={data:[]}
componentWillMount = () => {
    this.getData();
  }