是否可以在 promise 的 THEN 结构中发送一个动作？

Question

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

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。

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”没有呈现，尽管我可以在控制台中看到上下文变量在一段时间后被填充。

与 setTimeout() 完美配合

但是，我观察到，如果我在几秒后通过 setTimeout 调度我的操作，而不是在 THEN 构造中调度操作，我的组件会完美呈现，如下所示：

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);
    }

恳请您抽出宝贵的时间来解决我的问题。

非常感谢。

Answer 1

为了等待所有组 .get() 调用解决，并发送结果，请使用 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 结构中发送一个动作？

Can an action be dispatched inside the THEN construct of a promise?

firebase

reactjs

redux

react-context