React & Firebase + Flux：子组件不呈现

Question

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

App
-UserList Component (sidebar)
-MessageList Component

UserList 组件从 this.state.threads 获取 props（state 属于主 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 中删除引用 UI（我也有一个 'child_removed' 事件侦听器）。

我这辈子都想不通。谁能解释为什么会这样/如何解决？试了整整半天，什么都没有。

仅供参考：

相关操作条目：

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

Answer 1

好的，所以我在大量阅读之后弄明白了 - 对 Flux 有点陌生。问题出在这里：

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

emitChange() 操作在 Firebase promise 被解析之前被触发，因此子组件在没有任何数据的情况下更新 hte 状态。因此，列表没有被呈现。我所做的改变是重新构建函数，以便 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!

有类似问题的任何人有所帮助

React & Firebase + Flux：子组件不呈现

React & Firebase + Flux : Child component does not render

javascript

flux

firebase

reactjs