javascript - Firebase react 绑定(bind)

Question

我对 React 有点陌生，并使用 re-base 库与 Firebase 配合使用。

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

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

我的表由两个 react 组件组成:一个表组件和一个行组件。

我的表格组件有 Prop teamid传递给它，我正在使用 re-base 的 bindToState 功能来获取 componentWillMount() 中关联的用户 key 。然后，我再次使用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 尚未完全计算出来，但我正在努力寻找解决此问题的最佳方法..

Answer 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 状态。我确信这只是由于我的 react 知识水平，所以当我弄清楚这一点时，我会发布解决方案。

编辑:使用listenTo而不是bindToState是正确的方法，因为bindToState的回调仅被触发一次。