Firebase 键/值访问不起作用答案

【问题标题】：Firebase Key/Value access not workingFirebase 键/值访问不起作用
【发布时间】：2016-02-14 11:28:43
【问题描述】：

我在 firebase 中有以下数据设置。

{ 
  "data": {
    "lava14mod1":"down",
    "lava14mod2":"up"
  }
}

我可以在我的 React 应用程序中访问它。但我只能将其作为（键，值）对组合为一个字符串来访问。

我无法使用单独访问键或值，

<li>{this.state.data[0]['.key']}</li>

我收到了这个错误，

Uncaught TypeError: Cannot read property '.key' of undefined

Uncaught TypeError: Cannot read property '_currentElement' of null

这是在 plunker 上运行的完整代码（没有错误行）

http://plnkr.co/edit/zjFKsYAzfYrzGmedVEV6?p=preview

我一直在翻阅文档，但仍然无法弄清楚。我正在遵循 firebase 文档中显示的数据结构，

[
  {
    ".key": "-Jtjl482BaXBCI7brMT8",
    ".value": 100
  },
  {
    ".key": "-Jtjl6tmqjNeAnQvyD4l",
    "first": "Fred"
    "last": "Flintstone"
  },
  {
    ".key": "-JtjlAXoQ3VAoNiJcka9",
    ".value": "foo"
  }
]

Firebase documentation

我的语法有问题吗？如何分别访问键或值？非常感谢。

【问题讨论】：

文本内容（JSON、错误消息、代码、文档）的屏幕截图无法替代真实内容。要尝试重现您的行为，我必须重新输入数据和代码。而不是屏幕截图，包括实际文本。到 plunkr 的（附加）链接也很棒，因为这将消除我（或其他寻求帮助的人）设置复制的需要。
plnkr.co/edit/zjFKsYAzfYrzGmedVEV6?p=preview
感谢您的回复！这是plunker链接。本来想早点加的，但是stackoverflow，抱怨没有sn-p的代码。
我认为我遗漏了一些非常明显的东西。
感谢您的链接。但是也在您的问题中包含最少的文本信息。我刚刚用其中的 JSON 替换了您的第一个屏幕截图。现在你做其他的。

标签： reactjs firebase firebase-realtime-database reactfire

【解决方案1】：

您收到该错误是因为 this.state.data 对象在 render 中没有您尝试访问的密钥。

如果您只是将console.log(this.state.data) 放在render 中，这很容易看出。这样做会在控制台中给我这样的东西：

> []
> [Object]
> [Object, Object]
> [Object, Object, Object]

因此，render 被调用了四次，每次使用新密钥更新this.state.data 一次。但是，在您的 render 中，您没有考虑到密钥 [0] 和 [1] 可能不存在的事实 - 您尝试访问它们而不先检查它们。

现在我不确定您的 state 为何会零碎更新，但它可能与我没有经验的 ReactFireMixin 有关。从 Firebase 获取显然是一个异步操作（因为您必须从云中获取数据），因此您需要为此做出调整。

最直接的解决方法是在尝试访问对象之前检查以确保您要访问的键确实存在于对象上（在大多数情况下，这是避免此类错误的好习惯！）

render: function() {
    return (
        <div>

          from firebase,
          {this.state.data ? <li>{this.state.data}</li> : undefined}
          {this.state.data && this.state.data[0] && this.state.data[0][".key"] ? <li>{this.state.data[0][".key"]}</li> : undefined}
          {this.state.data && this.state.data[1] && this.state.data[1][".key"] ? <li>{this.state.data[1][".key"]}</li> : undefined}

          local var,
          <li>{data2[0]['.key']}</li>


        </div>
    );
}

http://plnkr.co/edit/7XXaOIQCQcyGneqEqa88?p=preview

更好的解决方案是使用Array.map 将当时的任何数组this.state.data 直接转换为某种列表。这是 React 应用程序中非常常见的模式，因为您经常将数据列表保存为数组，然后希望动态显示它。

render: function() {
    return (
        <div>

          from firebase,
          {this.state.data.map(function(ea){return <li>Key: <strong>{ea[".key"]}</strong>, Value: <strong>{ea[".value"]}</strong></li>})}

          local var,
          <li>{data2[0]['.key']}</li>


        </div>
    );
}

http://plnkr.co/edit/b1j10M1i635hvapFxZbG?p=preview

More about Array.map()

【讨论】：