0

firebase データベースからデータを取得し、状態オブジェクトを更新する基本的なコンポーネントがあります。次に、this.state.data を export 関数に渡してデータベースからデータを表示しようとしましたが、データに対して未定義のエラーが発生しました (データに何もない場合)。

/**
========= 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 に渡す方法を教えてください。

ありがとう

4

1 に答える 1

1 
  listenForPersons = (personsRef) => {
    personsRef.onSnapshot( (snap) => {
      var persons = [];
      snap.forEach(child => {
        persons.push({
          name: child.val().name,
          _key: child.key
        })
      });
      this.setState({data: persons});
    });
  };
于 2018-01-19T19:21:52.463 に答える