ReactJs 没有在 useEffect 中读取 map 函数答案

【问题标题】：ReactJs is not reading map function inside useEffectReactJs 没有在 useEffect 中读取 map 函数
【发布时间】：2021-08-21 08:01:51
【问题描述】：

我想从 firestore 获取 3 个不同的东西，因此在我的代码中应用了 3 个 useEffect，其中我的反应不是读取第 3 个 useEffect 中的 map 函数。这里第三个 useEffect 中的地图功能不起作用

代码：第一次使用效果：

useEffect(() => {
        var applications = [];
        const hospitals = [];
        const studentId = [];
        const details = [];
        firebaseConfig
            .firestore()
            .collection("counselor")
            .doc(currentUser.uid)
            .collection("studentDetails")
            .get()
            .then((snapshot) => {
                snapshot.docs.forEach((detail) => {
                    let currentID = detail.id;
                    let appObj = { ...detail.data(), ["id"]: currentID };
                    details.push(appObj);

                    details.push(detail.data());
                });
                setDetails(details);
                
            });
}, []);

第二次使用效果：

useEffect(() => {
        const item = [];

        details.map((detail) => {
            console.log(detail.id);
            firebaseConfig
                .firestore()
                .collection("counselor")
                .doc(currentUser.uid)
                .collection("studentDetails")
                .doc(detail.id)
                .collection("studentApplications")
                .get()
                .then((snapshot) => {
                    snapshot.docs.forEach((detail) => {
                        let currentID = detail.id;
                        let appObj = { ...detail.data(), ["id"]: currentID };
                    

                        item.push(detail.data().applicationStatus);
                    
                        setStudentId(item);
                    });

                
                });

        });

        setDemo(item);
    
    }, [details]);

第三个使用效果：

useEffect(() => {
        demo.map((hii) => {
            
            if (hii === "PaymentFormFilled") {
                complete = complete + 1;
                setCom(complete);
            }
        });
    }, [demo]);

【问题讨论】：

demo 的首字母是什么？
demo 的首字母是一个空数组

标签： reactjs firebase google-cloud-firestore react-hooks

【解决方案1】：

你的错误不清楚：“react is not reading map function...”。

可能有几个问题：

setDemo 是否为名为 demo 的状态变量赋值？如果没有，您的第三个 useEffect 将不会被触发
分配给 demo 的值是多少？您可能不会在其上运行 .map

【讨论】：

1.是的 setDemo 正在为 demo 赋值
2.它是一个数组

【解决方案2】：

因为setCom 是异步的。 state complete 仅在组件重新渲染时更新值。请将setCom 移至外循环。在这种情况下使用forEach 而不是map。

useEffect(() => {
  let newCount = complete;
  demo.forEach((hii) => {
    if (hii === "PaymentFormFilled") {
      newCount += 1;
    }
  });

  setCom(newCount);
}, [demo]);

【讨论】：

forEach 函数没有运行，我所做的 console.log，react 也没有读取，请让我知道我该怎么做。 useEffect(() => { let newCount = complete; demo.forEach((hii) => { console.log('inside forEach') if (hii === "PaymentFormFilled") { newCount += 1; } }) ; setCom(newCount); }, [demo]);