Firebase 反应绑定答案

【问题标题】：Firebase React BindingFirebase 反应绑定
【发布时间】：2017-01-19 22:33:20
【问题描述】：

我对 React 有点陌生，并且使用 re-base 库与 Firebase 一起工作。

我目前正在尝试呈现一个表格，但由于我的数据在 firebase 中的结构方式，我需要从两个位置获取一个键列表 - 第一个是成员的用户键列表一个团队，第二个是完整的用户信息。

团队节点结构如下：/teams/team_id/userkeys，用户信息存储如下：/Users/userkey/{email, name, etc.}

我的表格由两个反应组件组成：一个表格组件和一个行组件。

我的表格组件有 props teamid 传递给它，我正在使用 re-base 的 bindToState 功能来获取 componentWillMount() 中的关联用户键。然后，我再次使用 bindToState 来获取完整的用户节点，如下所示：

componentWillMount() {
  this.ref = base.bindToState(`/teams/${this.props.data}/members`, {
  context: this,
  state: 'members',
  asArray: true,
  then() {
   this.secondref = base.bindToState('/Users', {
   context: this,
   state: 'users',
   asArray: true,
   then() {
     let membersKeys = this.state.members.map(function(item) {
       return item.key;
     });
     let usersKeys = this.state.members.map(function(item) {
       return item.key;
     });
     let onlyCorrectMembersKeys = intersection(membersKeys, usersKeys);
     this.setState({
       loading: false
     });
   }
 });
 }
});
}

如您所见，我创建了 membersKeys 和 usersKeys，然后使用 underscore.js 的交集函数来获取我的用户节点中的所有成员键（注意：我这样做是因为在某些情况下用户将成为团队成员，但不属于/Users）。

我正在苦苦挣扎的部分是添加一个额外的 rebase 调用来创建完整的成员数组（即来自 /Users 的用户数据用于 onlyCorrectMembersKeys 中的键。

编辑：我试过了

    let allKeys = [];
      onlyCorrectMembersKeys.forEach(function(element) {
        base.fetch(`/Users/${element}`, {
          asArray: true,
          then(data) {
            allKeys.prototype.concat(data);
          }
        });
      });

但是我收到了错误Error: REBASE: The options argument must contain a context property of type object. Instead, got undefined

我假设这是因为 onlyCorrectMembersKeys 尚未完全计算，但我正在努力找出解决此问题的最佳方法..

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

对于同样处理此问题的任何人，我似乎已经找到（某种程度上）解决方案：

     onlyCorrectMembersKeys.map(function(item) {

         base.fetch(`/Users/${item}`, {
           context: this,
           asObject: true,
           then(data) {
             if (data) {
               allKeyss.push({item,data});
               this.setState({allKeys: allKeyss});
             }
             this.setState({loading: false});
           },
          onFailure(err) {
            console.log(err);
            this.setState({loading: false});
          }
         })
       }, this);
     }

这工作正常，但是当users 和members 状态更新时，它不会更新allkeys 状态。我确信这只是由于我的反应知识水平，所以当我弄清楚时，我会发布解决方案。

编辑：使用listenTo 代替bindToState 是正确的方法，因为bindToState 的回调只触发一次。

【讨论】：