使用 ReactFire 的 Firebase 用户特定数据

Question

我正在尝试使用 ReactFire 来获取用户特定的数据并显示它。我已经按照Firebase's denormalized suggestions 组织了我的数据。下面看一下数据的结构。

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

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

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));
}

从技术上讲，该代码有效。但是速度很慢。

当我使用 ReactFire 直接写入便笺时，无需通过用户，它工作得很好，而且更简单。但我需要说明是用户特定的。所以我想找到一种方法来使用这种数据结构的 ReactFire。这可能吗？

Answer 1

重要的部分是你不想想听完整的笔记树。这可以通过断言注释 ID 不会在用户控制之外更改来实现。一个注释可能被另一个用户删除和添加并且具有相同的 ID，这很好。

您将首先收听当前登录的用户user/${auth.id}，然后通过添加this.bindAsObject(ref, `note_${noteKeySnapshot.key()}`) 来填充注释。然后每次状态更新：

 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>
}