有人可以帮助我了解 async + await + useEffect 在 React 中的工作原理吗？

Question

我有一个使用 Minimal 模板构建的 React 应用程序，我正在尝试按照他们的一个教程进行操作，以创建一个将一些数据提供给自定义组件的 Redux 切片。数据本身是从 Firebase 收集的。下面是我的代码：

firebase.js - 助手

export function getDocuments(col) {
    const colRef = collection(db, col);
    const q = query(colRef, where('uid', '==', auth.currentUser.uid));

    getDocs(q).then((snap) => {
        const data = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
        return data;
    });
   // return [1,2,3]
}

product.js - Redux 切片

export function getProducts() {
    return async (dispatch) => {
        dispatch(slice.actions.startLoading());
        try {
            const products = await getDocuments('products');
            dispatch(slice.actions.getProductsSuccess(products));
        } catch (error) {
            dispatch(slice.actions.hasError(error));
        }
    };
}

ProductList.js - 组件

const dispatch = useDispatch();
const { products } = useSelector((state) => state.client);

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

useEffect(() => {
    if (products.length) {
        // setTableData(products);
    }
}, [products]);

如果我在辅助函数 (firebase.js 中控制台记录 data，一旦承诺 [=41]，我就会得到我期望的值=].但是，如果我 console.log clients 在 product.js 切片或组件中的稍后部分，我会得到 undefined。我认为我的问题是无法理解 async + await + useEffect 如何协同工作以解决此问题。我的假设是我试图在承诺解决之前访问该值，因此在辅助函数 returns 之前访问它。我通过在辅助函数中返回一个简单的数组 [1, 2, 3] 作为测试来确认这一点。

我想我在这里遗漏了一些基本的东西（我对 React 和 JS 总体上不是很有经验，但仍在不断学习）。有人可以帮助我了解我做错了什么吗？

谢谢！

Answer 1

Async 和 Await 在 React 中与在普通 JavaScript 中没有什么不同：当应用 await 关键字时，它会挂起调用方法并将控制权交还给其调用者，直到等待的任务完成。 await 只能在异步方法中使用

useEffect(): 通过使用这个 Hook，你告诉 React 你的组件需要在渲染后做一些事情。每当组件 re-rendered.

时，此函数将运行

Answer 2

使用 await 您可以等待承诺的履行或拒绝，但您的 getDocuments 函数没有 return 承诺。将函数的最后一行更改为以下内容：

return getDocs(q).then((snap) => {
    const data = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
    return data;
});

有人可以帮助我了解 async + await + useEffect 在 React 中的工作原理吗？

Can someone help me understand how async + await + useEffect work in React?

javascript

async-await

reactjs

use-effect