Question

我在react中有一个组件，该组件需要使用一些内部调用的函数来加载初始数据，该函数将数据从数据库的其他部分分发到redux。通过将其命名为once，我得到了我的列表，并设置了所有数据。但是我想听列表中的更改，但是里面没有init数据检索器函数。看起来像这样：

const Component = ({
    projectId,
    setId,

    getSet
}) => {
    useEffect(() => {
        if (setId) {
            getSet(projectId, setId);
        }
    }, [setId]);
    //...
    
    //...
const getClassesForElements = (projectId, elements, callback) => {

    if (projectId && Array.isArray(elements)) {
        
        const elementsClasses = elements.reduce(
            async (classes, elementId) => {

                const className = await elementsDb
                .child(`${projectId}/${elementId}`)
                .once("value", snap => snap.val());

                classes[elementId] = className;
                return classes;
            },
        {});
        
        callback && callback(elementsClasses);
        return elementsClasses;
    }
};

const getClassesAttributes = (projectId, classes, callback) => {

    if (projectId && Array.isArray(classes)) {
        const classesAttributes = classes.reduce(
            async (classes, classId) => {

                const attributes = await classesDb
                .child(`${projectId}/${classId}`)
                .once("value", snap => snap.val());

                classes[classId] = attributes;
                return classes;
            },
        {});
        
        callback && callback(classesAttributes);
        return classesAttributes;
    }
};

export const getSet = (
    projectId,
    setId
) => (
    async dispatch => (
        projectId && setId &&
        setsDb
        .child(`${projectId}/${setId}`)
        .once("value", async snap => {

            const set = await snap.val();
            dispatch(setSet(set));

            const elements = Object.keys(set);
            
            //get data from other parts of the database
            const elementsClasses = await getClassesForElements(projectId, elements);
            dispatch(setElements(elementsClasses));

            const classes = Object.values(elementsClasses);
            
            //get data from other parts of the database
            const classesAttributes = await getClassesAttributes(projectId, classes);
            dispatch(setClasses(classesAttributes));
        })
    )
);

因此getClassesForElements和getClassesAttributes只能被调用一次，除非setId已被更改。我正在考虑以某种方式实现child_added而不是once，但是每次添加一个孩子时，它都会调用getClassesForElements和getClassesAttributes。我还考虑过将getClassesForElements和getClassesAttributes移到侦听器之外，但是它们是set的依赖项，因此，如果将它们与挂钩中的异步函数连接，它将是同样的结果。因此，最好的方法是跳过child_added侦听器的初始启动，并将其放在检查setId是否已更改的效果中，或者只是将相同的数据获取两次。有什么想法吗？

如何在firebase-web中跳过“ child_added”侦听器的初始操作？

0 个答案: