加入React中的Firebase表格 [英] Joining Firebase tables in React

问题描述

我希望在React应用程序中显示来自Firebase数据库的用户注释列表。

阅读Firebase 关于结构化数据的建议方法，我用他们推荐的扁平格式创建了我的数据库。数据结构如下所示：

 笔记
  -  [noteKey] 
  - 笔记：[noteData ] 
  -  created_at：[date] 
  -  updated_at：[date] 
 ... 
用户
  -  [userKey] 
  -  name：[userName ] 
  - 笔记
  -  [noteKey]：true 
 ... 
 ... 
  

每个用户都有一个名为notes的数组，它列出了他们拥有的notes的noteKey。

到目前为止，我已经能够获得完整的笔记列表（来自所有用户，而不是我想要的）和用户的noteKeys列表。我遇到的问题是将这两者结合起来。我已经看到关于连接表的问题，但我有更多的一个React焦点问题：

其中React函数是否发生连接？

现在我的代码如下所示：

  getInitialState：function（）{
 return {
 notesList：[] 
}; 
}，
 componentWillMount：function（）{
 
ase = Rebase.createClass（'https://appName.firebaseio.com'）; 
 base.syncState（'notes'，{
 context：this，
 state：'notesList'，
 asArray：true，
 queries：{
 limitToLast：20 
} 
}）; 
 
 this.state.notesList.map（function（item，i）{
ase.child（notes /+ item ['.key'] +/ note）。 on（'child_added'，function（snapshot）{
 console.log（item ['.key']）
}）; 
}）; 
}，
  

我看到两个问题。
$ b

1. 当 this.state.notesList.map 函数在 componentWillMount ，数组尚未填充Firebase数据，所以它看起来像一个空数组，并返回一个错误。
   
2. 一旦我解决了＃1问题，我不确定如何将用户特定的笔记导入其自己的数组中，该数组可以被组件的其余部分访问。

-

• 在哪个React时间线函数中应该发生连接？
第二个表项（用户的注释）如何被添加到可由其余部分？ 您正在使用异步库（重新编译），但是您已经编写了同步代码。




这意味着什么 base.syncState 将会向您的Firebase实例发出请求，同时，您的JavaScript我们将会乐意继续下去，不管结果如何。因此， this.state.notesList.map 将会映射到一个空的数组，因为JS的执行速度要比往返服务器的速度快。





查看可用于syncState方法的选项，有一个名为，然后执行回调的。




then：（function - optional）当使用Firbase建立初始侦听器时，将调用的回调函数。




这个让我觉得它会在你得到你的信息后触发来自Firebase的数据。





尝试在那里运行您的 .map ，因为您实际上拥有您想要的数据。



  componentWillMount：function（）{
 
ase = Rebase.createClass（'https：// appName .firebaseio.com'）; 
 base.syncState（'notes'，{
 context：this，
 state：'notesList'，
 asArray：true，
 queries：{
 limitToLast：20 
，
 then：function（）{
 this.state.notesList.map（function（item，i）{
ase.child（notes /） + item ['。key'] +/note\").on('child_added'，function（snapshot）{
 console.log（item ['.key']）
}）; 
}）; 
} 
}）; 
} 
  




I am hoping to display a list of user's notes from a Firebase DB inside of a React app.

After reading through the Firebase recommended approach on structuring data, I've created my database in the flattened format they recommend. The data structure looks something like this:

    notes
    - [noteKey]
      - note: [noteData]
      - created_at: [date]
      - updated_at: [date]
    ...
    users
      - [userKey]
         - name: [userName]
         - notes
           - [noteKey]: true
           ... 
    ...

Each user has an array called notes, which lists the noteKeys of the notes that they own.

So far I've been able to get the full list of notes (from all users, not what I want), and the user's list of noteKeys. The issue that I'm having is combining those two. I have seen the question about joining tables, but I have more of a React focused question:

In which React function does the join happen?

Right now my code looks like this:

    getInitialState: function(){
      return {
        notesList: []
      };
    },
    componentWillMount: function() {

      base = Rebase.createClass('https://appName.firebaseio.com');
      base.syncState('notes', {
        context: this,
        state: 'notesList',
        asArray: true,
        queries: {
          limitToLast: 20
        }
      });

      this.state.notesList.map(function(item, i) {         
        base.child("notes/" + item['.key'] + "/note").on('child_added', function(snapshot) {
          console.log(item['.key'])
        }); 
      });
    },

I see two issues with this.

1. When the this.state.notesList.map function is called in componentWillMount, the array hasn't been populated with the Firebase data yet, so it looks like an empty array and returns an error.
2. Once I solve #1, I'm not sure how to get the user specific notes into it's own array that's accessible by the rest of the component.

--

• In which React timeline function should the join be happening?
• How do the second table items (the user's notes) get added to an array that is accessible by the rest of the component?

解决方案

You're working with an async library (re-base) here but you've written synchronous code.

What this means is base.syncState is going to fire off a request to your Firebase instance and in the meantime, your JavaScript is going to just keep happily executing down the line with or without results. It follows that this.state.notesList.map is going to map over an empty array since JS is going to execute faster than a round trip to the server.

Looking at the options available for the syncState method, there's one called then that executes a callback.

then: (function - optional) The callback function that will be invoked when the initial listener is established with Firbase. Typically used (with syncState) to change this.state.loading to false.

This makes me think that it fires after you get your data from Firebase.

Try running your .map in there since you'll actually have the data you want.

componentWillMount: function() {

  base = Rebase.createClass('https://appName.firebaseio.com');
  base.syncState('notes', {
    context: this,
    state: 'notesList',
    asArray: true,
    queries: {
      limitToLast: 20
    },
    then: function() {
      this.state.notesList.map(function(item, i) {         
        base.child("notes/" + item['.key'] + "/note").on('child_added', function(snapshot) {
          console.log(item['.key'])
        }); 
      });
    }
  });
}

这篇关于加入React中的Firebase表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！