Firebase 键/值访问权限不起作用

Question

我在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"
  }
]

火力基地文档

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

Answer 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

关于Array.map()