reactjs - 异步函数不等待返回的数据将操作分派给减速器

Question

当我的程序应该只分派一个时，我的程序正在分派两个动作到我的减速器。我正在使用异步功能，但我认为它不能正常工作。

我的控制台日志打印了这个：

这是我的代码：

useEffect(() => {
    try {
      if (user) {
        const params = new URLSearchParams(window.location.search);
        const pid = params.get("pid");
        console.log(pid);

        async function fetchData() {
          const docRef = db
            .collection("users")
            .doc(user?.uid)
            .collection("products")
            .doc(`${pid}`);

          const data = await docRef.get().then(function (doc) {
            setName(doc.data().name);
            setPrice(doc.data().price);
            setDescription(doc.data().description);
            setQuantity(doc.data().quantity);
            setDownloaded(true);

            dispatch({
              type: "SET_EDIT_PRODUCTS",
              item: {
                name: name,
              },
            });
          });
        }
        fetchData();
      }
    } catch (error) {}
  },);

标签： reactjsredux

Answer 1

您对 useEffect 有依赖关系，这意味着每当name变量更改时，都会触发效果挂钩。在您的控制台数据中，似乎首先 name 变量是一个空字符串，然后它有一个值。