反应本机Firebase设置

Question

I am trying to grab data from my firebase DB within my react native application.

I have it set up correctly (as far as I can see) but when the application renders I don't see any data.

I have a component FirebaseList.js

const firebaseConfig = {
  **Details**
};
firebase.initializeApp(firebaseConfig);

const data = [];

class FirebaseList extends Component {
  constructor(props) {
    super(props);

    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      listViewData: data,
    };
  }

  render() {
    return (
      <List
      dataSource={this.ds.cloneWithRows(this.state.listViewData)}
      renderRow={data =>
        <ListItem>
          <Text>{data}</Text>
        </ListItem>
      }
      />
    );
  }
}

I call this component elsewhere - my export is set up correctly as are my imports.

Thanks in advance.

Answer 1

You should fetch data from firebase in componentDidMount()!

 import firebase from 'firebase'; class FirebaseList extends Component { constructor(props) { super(props); this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); this.state = { listViewData: [], }; } componentWillMount() { const firebaseConfig = { **Details** }; firebase.initializeApp(firebaseConfig); } componentDidMount() { firebase.database().ref('/path/datas/').once('value', snapshot => { const dataArray = []; const yourDatas = snapshot.val(); for(let data in yourDatas){ dataArray.push(data) } this.setState({ listViewData: dataArray }); }) } render() { return ( <List dataSource={this.ds.cloneWithRows(this.state.listViewData)} renderRow={data => <ListItem> <Text>{data}</Text> </ListItem> } /> ); } }