React & Firebase + Flux：子组件不渲染答案

【问题标题】：React & Firebase + Flux : Child component does not renderReact & Firebase + Flux：子组件不渲染
【发布时间】：2016-08-17 00:56:07
【问题描述】：

我已经检查过这个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 UI 中删除引用（我还有一个“child_removed”事件侦听器）。

对于我的一生，我无法弄清楚这一点。谁能解释为什么会发生这种情况/如何解决？我花了整整半天的时间尝试，但没有想到任何东西。

仅供参考：

相关操作条目：

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

【问题讨论】：

标签： javascript reactjs firebase flux

【解决方案1】：

好的，经过大量阅读，我明白了——对 Flux 来说有点新。问题就在这里：

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

emitChange() 操作在 Firebase 承诺被解决之前被触发，因此子组件在没有任何数据的情况下更新 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 加载后触发。希望这可以帮助任何遇到类似 promises/firebase/ajax 问题的人！

【讨论】：