如何使用 js 向 Firebase 添加、更新和列出数据答案

【问题标题】：How to add, update and list data into firebase using js如何使用 js 向 Firebase 添加、更新和列出数据
【发布时间】：2017-06-28 17:41:52
【问题描述】：

我正在使用 react native 和 firebase 做我的第一个应用程序，所以我知道如何像这样配置

var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

但我不知道如何列出添加或更新数据有人可以帮助我我已经尝试过

firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
});

【问题讨论】：

错误是什么？

标签： reactjs firebase react-native firebase-realtime-database

【解决方案1】：

Firebase 官网上有一个很好的一步一步的 ReactFire 教程。在这里查看https://www.firebase.com/docs/web/libraries/react/guide.html

第 1 步：使用 in head 标签将 firebase 添加到您的项目中。

<!-- Inside head -->
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>

第 2 步：创建对用户节点（或数据库中的任何节点）的引用您可以使用 componentWillMount() 方法来完成。（假设您的 firebase 节点是用户）

componentWillMount() {
    this.firebaseRef = new Firebase("https://YourApp.firebaseio.com/users");
}

第3步：将数据添加到firebase（假设表单在提交时调用handleSubmit函数）

handleSubmit: function(e) {
   e.preventDefault();
   this.firebaseRef.push({
      username: 'username',
      email: 'email@examle.com',
      imageUrl: 'some image url'
   });
   this.setState({text: ""});
}

第 4 步：卸载组件时清理数据库处理程序。

componentWillUnmount: function() {
   this.firebaseRef.off();
}

【讨论】：

谢谢各位！！工作！