如何循环浏览和显示从 Firebase(实时数据库)收集的项目列表

Question

我有一个从Firebase收到的对象，现在我需要以某种方式循环访问它并显示它。 部分问题是Firebase为架构中的每个条目提供了一个唯一的标识符，这意味着我必须做一些javascript"魔术"来获取我的数据。

这是我到目前为止所拥有的，但我对整个关键问题有问题(波纹管目前给出的错误是：Warning: Each child in a list should have a unique "key" prop.(。我还没有在网上找到任何明确的帮助，所以任何帮助不胜感激。

Firebase 中的数据如下所示：

• fooData
  • 吉伯利语随机ID
    • 标题
    • 日期
    • 降价文本

编辑：为了清楚起见，这个问题的第二部分是我应该如何提取我需要的数据？ (标题、日期、降价(。 这个map函数似乎是最有前途的方法，但我不确定如何获取子元素。 目前我没有得到任何信息(空(。 我假设这是因为标题、日期、markdown 子级更深一层，并且不存在于对象的当前根元素上。

class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
firebase: props.firebase,
data: null
}
}
componentDidMount() {
const dataRef = firebase.database().ref('link/fooData');
dataRef.on('value', snapshot => {
this.setState({
data: snapshot.val()
});
});
}
render() {
return (
<div className="container">
{(this.state.data) ? (
<div>
{Object.keys(this.state.data).map((key) => {
return (
<Row>
<Col lg={2}><p key={key}>{this.state.data[key].title}</p></Col>
<Col lg={2}><p key={key}>{this.state.data[key].date}</p></Col>
<Col lg={8}><ReactMarkdown key={key}>{this.state.data[key].markdownText}</ReactMarkdown></Col>
</Row>
)
})}
</div>
) : null}
</div>
)
}
}

Answer 1

尝试像这样添加键

return (
<Row key={key}>
<Col lg={2}><p>{key.title}</p></Col>
<Col lg={2}><p>{key.date}</p></Col>
<Col lg={8}>
<ReactMarkdown >{key.markdownText} 
</ReactMarkdown>
</Col>
</Row>
)

有关更多信息，您可以参考文档

Answer 2

techguru的答案是有效的，这取决于你的情况。 然而，对我来说，我必须通过Firebase对象中的唯一键。

为了实现这一点，我在快照上使用 forEach 循环：

dataRef.on('value', (snapshot) => {
snapshot.forEach(item => {
this.setState({data: this.state.data.concat(item.val().data)});
});
});

从这里我获取状态并以render()显示数据，类似于 techguru 的答案。

希望这个答案加上技术大师的回答能很好地汇编信息:)