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

使用ReactFire的Firebase用户特定数据

1 个答案: