使用 ReactFire 的 Firebase 用户特定数据

IT技术 reactjs firebase
2021-05-09 01:40:18

我正在尝试使用 ReactFire 来获取用户特定的数据并显示它。我已经根据Firebase 的非规范化建议组织了我的数据下面来看看数据的结构。

"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 这个数据结构。这可能吗?

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