State.data 未在反应本机的导出功能中更新？

Question

我有一个从 firebase 数据库中检索数据并更新状态对象的基本组件。然后我尝试将 this.state.data 传递给导出函数以查看数据库中的数据，但它会抛出未定义的数据错误（因为数据中没有任何内容）。

/**
========= LaunchScreen ==========
**/
export default class LaunchScreen extends PureComponent<*, State> {

constructor(props) {
    super(props);
    this.state = { data: [] };
    this.personsRef = firbaseApp.database().ref().child('Persons');
    this.listenForPersons = this.listenForPersons.bind(this);
  }

  componentDidMount = () => { this.listenForPersons(this.personsRef); };

  listenForPersons = (personsRef) => {
    personsRef.on('value', (snap) => {
      var persons = [];
      snap.forEach(child => {
        persons.push({
          name: child.val().name,
          _key: child.key
        })
      });
      this.setState({data: persons});
    });
  };



  _renderScene = ({ route }) => {
    console.log(this.state.data);
    switch (route.key) {
      case '1':return ( <SimplePage state={this.state} /> );
      case '2': return ( <SimplePage state={this.state} /> );
      default: return null;
    }
  };

 
  render() {
    return (
        <TabViewAnimated renderScene={this._renderScene} />
    );
  }
}

简单页面

export default function CurrentStateIndicator({ state, style }: *) {
  return (
    <View>
      <View>
        <Text>Current route is: {state.routes[state.index].title || state.index}</Text>
      </View>
    <List>
      <FlatList
        data={state.data}
        renderItem={({ person }) => (
          <ListItem
            title={person.name}
          />
        )}
      />
    </List>
    </View>
  );
}

但显然，在 SimplePage 中 state.data 是未定义的。

任何人都可以帮助我如何将更新后的 state.data 传递给 simplePage。

谢谢

Answer 1

  listenForPersons = (personsRef) => {
    personsRef.onSnapshot( (snap) => {
      var persons = [];
      snap.forEach(child => {
        persons.push({
          name: child.val().name,
          _key: child.key
        })
      });
      this.setState({data: persons});
    });
  };