Question

我已经检查了这个SO article，但解决方案不起作用。我有一个使用Firebase + Flux的简单消息传递应用程序：

App
-UserList Component (sidebar)
-MessageList Component

UserList组件从this.state.threads获取 props （状态属于主App组件）。

在我的Flux ThreadStore中，我将以下事件侦听器绑定到firebaseRef：

const _firebaseThreadAdded = (snapshot) => {
    threadsRef.child(snapshot.key()).on('value', (snap) => {
        console.log('thread added to firebase');
        _threads.push({
            key: snap.key(),
            threadType: snap.val().threadType,
            data: snap.val()});
    });
}

ref.child(ref.getAuth().uid).child('threads').on('child_added', Actions.firebaseThreadAdded);

UserList使用this.props.threads.map(thread => { return(<li>{thread.name}</li>) } )（汇总）然后根据firebaseRef / userId / threads中的线程键在侧栏中呈现线程名称列表。

但是，在我点击应用中的任何按钮或直接从Firebase Forge用户界面删除参考之前，这不会呈现任何用户列表（我还有一个＆＃39; child_removed＆＃39 ;事件监听器）。

对于我的生活，我无法弄清楚这一点。任何人都可以解释为什么会发生这种情况/如何解决它？我花了整整半天的时间尝试并且没有想出任何东西。

供参考：

相关的Dispatcher.register条目：

case actionConstants.FIREBASE_THREAD_ADDED: _firebaseThreadAdded(action.data); threadStore.emitChange(); break;

相关操作条目：

firebaseThreadAdded(data) { AppDispatcher.handleAction({ actionType: actions.FIREBASE_THREAD_ADDED, data }); },

Answer 1

好的，所以我在经过大量阅读后想出来 - 对Flux来说有点新鲜。问题出在这里：

case actionConstants.FIREBASE_THREAD_ADDED:
        _firebaseThreadAdded(action.data);
        threadStore.emitChange();
        break;

在解决Firebase承诺之前触发了emitChange()操作，因此子组件正在更新没有任何数据的状态。因此，列表没有呈现。我做了什么改变这个是重新设计函数，以便threadStore.emitChange()只能在解决时触发：

const _firebaseThreadAdded = (snapshot) => {
    threadsRef.child(snapshot.key()).once('value').then(snap => {
        console.log('thread added to firebase: ', snap.key());
        _threads.push({
            threadId: snap.key(),
            threadType: snap.val().threadType,
            data: snap.val()});
        threadStore.emitChange();
    });
}

以及生成的调度程序寄存器条目：

case actionConstants.FIREBASE_THREAD_ADDED:
            _firebaseThreadAdded(action.data);
            break;

不知道这是否是处理此问题的最佳方式，但它正在完成工作 - 只有在加载firebase后才会触发emit事件。希望这可以帮助任何有类似问题的promises / firebase / ajax！

反应＆amp; Firebase + Flux：子组件无法渲染

1 个答案: