在应用程序中看不到 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

你说你的代码是正确的，那么还要检查这个规则是否已经设置

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

注意： - 当您使用上述规则时，您的数据库对所有Read more here 都是开放的。让您在推送到生产环境后使用更新规则。

Answer 2

如果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.")
    }
  }
}