无法在应用程序中查看firebase数据 - 本地

Question

我已经设置了一个使用react native从我的firebase数据库中获取数据的调用。

数据库结构

FirebaseList.js

内的代码

constructor(props) {
  super(props);
  this.state = {
    data: []
 };
}

componentWillMount() {
  firebase.database().ref('/signposts/items').on('value', snapshot => {
    const dataArray = [];
    const result = snapshot.val();
    for (const data in result) {
      dataArray.push(data);
    }
    this.setState({ data: dataArray });
    console.log(this.state.data);
  });
}

render() {
  return (
    <FlatList
      data={this.state.data}
      renderItem={({ item }) => (
        <Text>{item}</Text>
      )}
      keyExtractor={item => item}
    />
  );
}

我相信与firebase的连接是成功的，因为我可以构建和运行应用程序。但是，当组件呈现时，我看不到我的两行数据'row1'和'row2'。

Answer 1

如果console.log(dataArray)显示空数组（假设console.log()有效...），请尝试检查您的连接：

componentDidMount() {
  const ref = firebase.database().ref('/signposts');
  const checkConnection = firebase.database().ref(`.info/connected`);
  checkConnection.on('value', function(snapshot) {
    if (snapshot.val() === true) {  /* we're connected! */
      firebase.database().ref('/signposts').on('value', snapshot => {
        const dataArray = [];
        const result = snapshot.val();
        for (const data in result) {
          dataArray.push(data);
        }
        if (dataArray.length === 0)
          console.log("No data.")
        else
          this.setState({ listViewData: dataArray });
      });
    } else {  /* we're disconnected! */
      console.error("Check your internet connection.")
    }
  }
}

Answer 2

您说您的代码是正确的，然后还要检查此规则是否已设置

{
  "rules": {
    "foo": {
      ".read": true,
      ".write": false
    }
  }
}

注意： - 使用上述规则时，您的数据库对所有Read more here开放。推动生产后，让您使用更新规则。