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

Firebase documentation

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

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显然是一个异步操作（因为您必须从云中获取数据），因此您需要为此做出调整。

最直接的解决方法是在尝试访问对象之前检查以确保要访问的密钥确实存在于对象上（在大多数情况下这是一种很好的做法，以避免出现这种错误！）< / p>

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()

Firebase密钥/值访问无效

1 个答案: