使用 re-base 在 React 应用程序和 Firebase 数据库之间同步多个状态属性答案

【问题标题】：Sync multiple properties on state between React app and Firebase database using re-base使用 re-base 在 React 应用程序和 Firebase 数据库之间同步多个状态属性
【发布时间】：2016-12-25 12:13:28
【问题描述】：

在将 React 应用程序状态的一个属性与 firebase 同步时，re-base 文档非常清楚：https://github.com/tylermcginnis/re-base#syncstateendpoint-options

它说在组件的 componentDidMount 方法中使用 syncState，如下所示：

componentDidMount(){
  base.syncState(`shoppingList`, {
    context: this,
    state: 'items',
    asArray: true
  });
}

我想同步两个不同的属性，所以 'shoppingList;和“每周预算”。我试图复制这样的语句：

componentDidMount(){
  base.syncState(`shoppingList`, {
    context: this,
    state: 'items'
  });
  base.syncState(`weeklyBudget`, {
    context: this,
    state: 'budget'
  });

}

但控制台只是抛出以下错误：

未捕获的错误：对象作为 React 子项无效（找到：带有键 {} 的对象）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查Order的渲染方法。

如何使用 re-base 在 React 应用和 Firebase 数据库之间同步多个状态属性？

【问题讨论】：

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

如果您在 context: this, 之后将asArray: true 添加到对象中，您应该没问题。

它对我来说就像这样。我自己对这段代码一点也不满意，因为我有七个块连接到不同的端点。另一种方法可能是通过Promise.all([x, y, z]).then()使用获取和解析

【讨论】：