Question

在添加或删除集合中的某些数据后，我想与Firebase Firestore数据库进行实时连接并更新UI。我已经尝试过使用onSnapshot函数，但问题是，当我转到一条不同的路由并加载其他组件时，即使数据库中以前存在的所有数据也再次获得了change.type ===“添加”。因此，当我获得此数据在上下文中重复并且在屏幕上获得双倍数据时，map函数也会抛出冗余键属性值的错误bcs。我应该怎么做才能避免这种情况？我正在使用上下文挂钩API + reducer和动作创建者，没有重做！

export const getProjects = (dispatch) => {
firestore.collection('projects').onSnapshot(snapshot => {
    snapshot.docChanges().forEach(change => {
        if(change.type === "added"){
             dispatch({type:'SET_PROJECTS', data: {
                title: change.doc.data().title,
                content: change.doc.data().content,
                id: change.doc.id
            }})
        }
    })
})

}

export const projectReducer = (state, action) => {
switch(action.type){
    case 'CREATE_PROJECT_ERR':
        console.log('Create project error', action.err.message);
        return state
    case 'SET_PROJECTS':
        return [...state,{
            title: action.data.title,
            content: action.data.content,
            id: action.data.id
        }]
    default: 
        return state
}

}

 useEffect(() => {
    getProjects(dispatch);
}, [dispatch])

那是与firestore连接并获取数据的代码，也是将reducer设置为上下文的代码

Answer 1

onSnapshot 总是调用一次最少的dataCallback，然后再次进行任何更改。 reducer只是将结果附加到现有状态，因此很可能解释了为什么您将其两次-稍微细微些来替换现有条目。 / p>

我通常使用Redux（而不是Context），但是我有许多实例，其中我的侦听器更新Redux状态，而现有的Redux连接器更新React。是的，我的减速机会处理重复项。

使用React Context Hook API从Firestore获取实时数据

1 个答案: