React & Firebase + Flux:子组件不渲染

React & Firebase + Flux : Child component does not render

本文关键字：组件 Flux amp Firebase React      更新时间：2023-09-26

我已经检查了这篇SO文章，但是，该解决方案不起作用。我有一个简单的消息应用，使用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);

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

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

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

仅供参考：

  1. 相关调度员注册条目：

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

  2. 相关操作条目：

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

好的，所以我在大量阅读后想通了 - 对 Flux 来说有点新。问题就在这里：

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

emitChange()操作是在解决 Firebase 承诺之前触发的，因此子组件在没有任何数据的情况下更新状态。因此，没有提供该清单。我所做的改变是重新构建函数，以便仅在解析时触发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 事件。希望这对任何有类似问题的人有所帮助 承诺/火力基地/ajax！

相关文章：