是否可以在promise的THEN构造内分派动作? [英] Can an action be dispatched inside the THEN construct of a promise?

问题描述

以下是在上下文变量中映射对象并呈现它们的组件.

The following is a component that maps through the objects in a context variable and renders them.

const MyGroups = () => {
    const { myGroups } = useContext(GlobalContext);

    return (
        <div className="my__groups">
            <h1 className="my__groups__heading">My Groups</h1>
            <div className="my__groups__underline"></div>
            <div className="my__groups__grid__container">
                {
                    myGroups.map(({id, data}) => (
                        <GroupCard
                            key={id}
                            name={data.name}
                            image={data.image} 
                        />
                    ))
                }
            </div>
        </div>
    )
}

以下是我的存储功能，该功能用于从Firebase提取数据并将操作分配给Reducer.

The following is my store function which I use to fetch my data from Firebase and dispatch an action to the Reducer.

function fetchGroupsFromDatabase(id) {
        let myGroups = [];
        db.collection("users").doc(id).get() // Fetch user details with given id 
            .then(doc => {
                doc.data().groupIDs.map(groupID => { // Fetch all group IDs of the user
                    db.collection("groups").doc(groupID).get() // Fetch all the groups 
                        .then(doc => {
                            myGroups.push({id: doc.id, data: doc.data()})
                        })
                })
            })
            .then(() => {
                const action = {
                    type: FETCH_GROUPS_FROM_DATABASE,
                    payload: myGroups
                };
                dispatch(action);
            })
    }

现在，问题在于"GroupCards"我想渲染的图像并没有渲染，尽管我可以在控制台中看到一段时间后会填充上下文变量.

Now, the problem is that the "GroupCards" that I want to render, are not rendering although I can see in the console that the context variable get's populated after some time.

与setTimeout()完美配合

但是，我观察到，如果不是在THEN构造中分派动作，而是在setTimeout几秒钟后分派动作，我的组件将呈现完美的外观，如下所示:

However, I have observed that instead of dispatching the action within the THEN construct, if I dispatch my action after some seconds by setTimeout, my component renders perfectly, like this:

function fetchGroupsFromDatabase(id) {
        let myGroups = [];
        db.collection("users").doc(id).get() // Fetch user details with given id 
            .then(doc => {
                doc.data().groupIDs.map(groupID => { // Fetch all group IDs of the user
                    db.collection("groups").doc(groupID).get() // Fetch all the groups 
                        .then(doc => {
                            myGroups.push({id: doc.id, data: doc.data()})
                        })
                })
            })

            setTimeout(() => {
                const action = {
                    type: FETCH_GROUPS_FROM_DATABASE,
                    payload: myGroups
                };
                dispatch(action);
            }, 3000);
    }

我谦虚地请您节省一些宝贵的时间，并为我的问题提供一些解决方案.

I humbly request you to kindly spare some of your valuable time and provide some solution to my problem.

非常感谢您.

推荐答案

为了等待所有组调用 .get()进行解析，并使用结果进行分派，请使用 Promise.all :

In order to wait for all of the groups .get() calls to resolve, and to dispatch with the results, use Promise.all:

async function fetchGroupsFromDatabase(id) {
    const doc = await db.collection("users").doc(id).get() // Fetch user details with given id 
    const myGroups = await Promise.all(
        doc.data().groupIDs.map(groupID => // Fetch all group IDs of the user
            db.collection("groups").doc(groupID).get() // Fetch all the groups 
                .then(doc => ({ id: doc.id, data: doc.data() }))
        )
    );
    const action = {
        type: FETCH_GROUPS_FROM_DATABASE,
        payload: myGroups
    };
    dispatch(action);
}

这篇关于是否可以在promise的THEN构造内分派动作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！