Firebase用户特定的数据与ReactFire [英] Firebase User Specific Data with ReactFire

问题描述

我试图使用ReactFire获取用户特定的数据并显示它。我根据 Firebase的非规范化建议来整理我的数据。这里看看数据的结构。

 notes：{
n1：{
note：[noteData] ，
created_at：[date]，
updated_at：[date]，
} 
}，
users：{ 
userOne：{
name：[userName]，
notes：{
n1：true 
} 
 } 
} 
  

我可以从应用程序中读取和写入数据下面的代码没有ReactFire，只要使用FB API（每次在记事本中键入按键时，都会运行 updateCode ）：

< pre $ componentWillMount：function（）{
firebaseRef.child（'users /'+ authData.uid +'/ notes'）。orderByChild（'date_updated'）。on （noteKeySnapshot）{
//将每个键添加到数组
usersNotesKeys.push（noteKeySnapshot.key（））;
//对于每个音符键，并使用相同的键
firebaseRef.child（'notes /'+ noteKeySnapshot.key（））。once（value，function（noteSnapshot）{
//将整个音符对象添加到数组中+父键
var data = noteSnapshot.val ）;
usersNotesList.push（{
'created_at'：data.created_at，$ b $'updated_at'：data.updated_at，
'note'：data.note，
'键'：noteKeySnapshot.key（）
}）;
}）;
this.setState（{
usersNotesList：usersNotesList
}）;
} .bind（this））;

$ b $ updateCode：function（newCode）{
firebaseRef.child（'notes /'+ this.state.item ['key']）。on（'value '，函数（noteSnapshot，prevChildKey）{
//查看当前的注释列表并找到匹配的键值并用新的内容更新该键值

var data = noteSnapshot.val ）;
updatedItem = {
'created_at'：data.created_at，
'updated_at'：data.updated_at，
'note'：data.note，
' key'：noteSnapshot.key（）
};
// console.log（updatedItem）;
this.setState（{
item：updatedItem
}）;
} .bind（this））;
}


这个代码在技术上是有效的。但是速度很慢。

当我使用ReactFire直接写入笔记而不通过用户时，它工作的很好，而且简单得多。但我需要注意用户特定的。所以我想找一个方法来使用ReactFire这个数据结构。这是可能的吗？

解决方案

主要部分是你不要 笔记树。这可以通过断言笔记ID不会在用户的控制之外改变。注释可能会被删除，并被其他用户添加，并具有相同的ID，这是很好的。

您将开始通过侦听当前登录的用户 user / $ {auth.id} ，然后用 this.bindAsObject（ref，`note _ $ {noteKeySnapshot.key（）}` 。然后每次更新状态：

$ $ p $ render（）{
let noteKeys = Object.keys（this.state）
noteKeys = noteKeys.filter（k => k.search（'note_'）=== 0）
let notes = []
for（let k in noteKeys）{
notes.push（this.state [k]）
}
return< div>
{notes.map（n =>< span> {note.created_at}< / span>）} //依此类推
< / div>
}


I am trying to use ReactFire to get user specific data and display it. I have organized my data in accordance to Firebase's denormalized suggestions. Here's a look at how the data is structured.

"notes" : {
    "n1" : {
        "note" : "[noteData]",
        "created_at" : "[date]",
        "updated_at" : "[date]",
    }
},
"users" : {
    "userOne" : {
    "name" : "[userName]",
        "notes" : {
            "n1" : true
        }
    }
}

I am able to get the data reading and writing from my app with the following code without ReactFire, just using the FB API (updateCode runs every time a keystroke is typed in the notepad):

componentWillMount: function() {
  firebaseRef.child('users/' + authData.uid + '/notes').orderByChild('date_updated').on("child_added", function(noteKeySnapshot) {
  // Take each key and add it to an array
  usersNotesKeys.push(noteKeySnapshot.key());
  // For each note key, go and fetch the Note record with the same key
  firebaseRef.child('notes/' + noteKeySnapshot.key()).once("value", function(noteSnapshot) {
    // Add that full note object to an array + the parent key
    var data = noteSnapshot.val();
    usersNotesList.push({
        'created_at': data.created_at, 
        'updated_at': data.updated_at,
        'note':       data.note,
        'key':        noteKeySnapshot.key()
    });
  });
  this.setState({
    usersNotesList: usersNotesList
  });
}.bind(this)); 
},

updateCode: function(newCode) {
  firebaseRef.child('notes/' + this.state.item['key']).on('value', function(noteSnapshot, prevChildKey) {
  // Look through the current note list and find the matching key and update that key with the new content.

    var data = noteSnapshot.val();
    updatedItem = {
        'created_at': data.created_at, 
        'updated_at': data.updated_at,
        'note':       data.note,
        'key':        noteSnapshot.key()
        };
        // console.log(updatedItem);
    this.setState({
      item: updatedItem
    });
  }.bind(this));
}

That code works, technically. But it is sluggishly slow.

When I use ReactFire to write directly to a note, without passing through a user, it works great and is much simpler. But I need notes to be user specific. So I would like to find a way to use ReactFire with this data structure. Is this possible?

解决方案

The essential part is that you do not want to listen at the full notes tree. This is possible by asserting that notes IDs will not change outside the user's control. A note might be deleted and added by another user and have the same ID, that is fine.

You would start by listening to the current logged in user user/${auth.id}, and populate the notes by adding them with this.bindAsObject(ref, `note_${noteKeySnapshot.key()}`). Then every time the state updates:

 render () {
   let noteKeys = Object.keys(this.state)
   noteKeys = noteKeys.filter(k => k.search('note_') === 0)
   let notes = []
   for (let k in noteKeys) {
     notes.push(this.state[k])
   }
   return <div>
     {notes.map(n => <span>{note.created_at}</span>)}  // and so on
   </div>
}

这篇关于Firebase用户特定的数据与ReactFire的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！