Question

我使用.push在Firebase中使用唯一ID创建对象。我试图通过更新组件状态在React组件中显示该对象。当没有唯一键时，我的组件正确显示数据（当我在firebase中手动创建条目作为直接子项时，但在通过.push创建时不能。这是我的反应组件渲染语句： class Snapshots扩展了React.Component { constructor（）{ 超（）; this.state = { 经销商：＆＃39; ＆＃39 ;, 来电：＆＃39;＆＃39;，聊天：＆＃39;＆＃39;，形式：＆＃39;＆＃39;， }; } componentDidMount（）{ const firebaseRef = firebase.database（）。ref（）。child（＆＃39; snapshot＆＃39;）; const callsRef = firebaseRef.child（＆＃39; calls＆＃39;）; const chatsRef = firebaseRef.child（＆＃39; chats＆＃39;）; const formsRef = firebaseRef.child（＆＃39; forms＆＃39;）; callsRef.on（＆＃39; value＆＃39;，snap =＆gt; { this.setState（{ 调用：snap.val（） }）; }）; chatsRef.on（＆＃39; value＆＃39;，snap =＆gt; { this.setState（{ 聊天：snap.val（） }）; }）; formsRef.on（＆＃39; value＆＃39;，snap =＆gt; { this.setState（{ 形式：snap.val（） }）; }）; } render（）{ return（＆lt; div className =＆＃34; container＆＃34;＆gt; ＆lt; div className =＆＃34; row＆＃34;＆gt; ＆lt; table className =＆＃34; table＆＃34;＆gt; ＆LT; THEAD＆GT; ＆LT; TR＆GT; ＆lt; th＆gt;电话＆lt; / th＆gt; ＆lt; th＆gt; Live Chats＆lt; / th＆gt; ＆lt; th＆gt; Web表单＆lt; / th＆gt; ＆LT; / TR＆GT; ＆LT; / THEAD＆GT; ＆LT; TBODY＆GT; ＆LT; TR＆GT; ＆lt; td scope =＆＃34; row＆＃34; className =＆＃34;电话号码背景＆＃34;＆gt;＆lt; span className =＆＃34;快照＆＃34;＆gt; {this.state.calls}＆lt; / span＆gt;＆lt; / td＆gt; ＆lt; td className =＆＃34; live-chats data-background＆＃34;＆gt;＆lt; span className =＆＃34; snapshot＆＃34;＆gt; {this.state.chats}＆lt; / span＆gt;＆lt; / TD＆GT; ＆lt; td className =＆＃34;网络表单数据背景＆＃34;＆gt;＆lt; span className =＆＃34;快照＆＃34;＆gt; {this.state.forms}＆lt; / span＆gt;＆lt; / TD＆GT; ＆LT; / TR＆GT; ＆LT; / tbody的＆GT; ＆LT; /表＆gt; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ）; } } 这是一个截图： http://screencast.com/t/spUuU5dDx 在我的输入字段中引用状态时，我错过了对唯一键的一些引用，但我不知道如何实际获得它。

Answer 1

使用.push()，您会获得一个唯一的密钥，例如：

var newPostKey = firebase.database().ref('posts').push().key;

然后你不能设置这样的数据：

firebase.database().ref('posts/' + newPostKey).set({ someData: data });

或者像这样：

firebase.database().ref('posts/' + newPostKey).on('value', (data) => {
    // data.val()...
});

Firebase：渲染在React组件中使用.push创建的帖子列表

1 个答案: