Javascript 在useEffect React钩子中的不同时间实现多个Firestore调用

我在上面的useEffect钩子中遇到错误getWord是一个实现firestore调用的函数。错误是：“TypeError:n不是函数”，它涉及在getWord中发生的firestore函数，以及在time2==0时发生的firestore调用。我如何使这两个异步调用都发生，显然，当time2==0时，在getWord中发生的firestore调用发生在调用之前？如果需要更多信息，请告诉我！我只是不明白使用await如何不能解决这个问题。

在useffect钩子中不能将异步函数作为回调传递，因为它返回不允许的承诺。只需尝试在useEffect中调用您的函数（但不要将回调函数本身定义为async），然后在该函数中执行异步任务

useEffect(async() => {
await getWord();
const interval = setInterval(() =>{
time2 = time2 - 1;
        if (time2 == 0) {
clearInterval(interval);
          let dataURL = canvasRef.current.toDataURL();
          const db = firebase.firestore();
          db.collection("rooms").where("code", "==", code).get().then((querySnapshot) => {
            querySnapshot.docs.forEach((snapshot) => {
              snapshot.ref.collection("rounds").where("round", "==", round).get().then((querySnapshot) => {
                querySnapshot.docs.forEach((snapshot) => {
                  snapshot.ref.collection("pictures").add({artist: name, dataURL: dataURL, votes: 0}).then(() => {
                    setVoteTime2(true);
                  });
                });
              });
            });
          });
        }
    }, 1000);
}, []);

useffect（（）=>{
//调用你的函数
myAsyncFunc（）{
等待getWord（）；
常量间隔=设置间隔（（）=>{
time2=time2-1；
如果（时间2==0）{
间隔时间；
让dataURL=canvasRef.current.toDataURL（）；
const db=firebase.firestore（）；
db.collection（“rooms”）.where（“code”，“code=”，code）.get（）.then（（querySnapshot）=>{
querySnapshot.docs.forEach（（快照）=>{
snapshot.ref.collection（“rounds”）.where（“round”，“==”，round.get（）。然后（（querySnapshot）=>{
querySnapshot.docs.forEach（（快照）=>{
snapshot.ref.collection（“图片”）。添加（{artist:name，dataURL:dataURL，vows:0}）。然后（（）=>{
setVoteTime2（真）；
});
});
});
});
});
}
}, 1000);
}
}, []);

---

它的作用是避免您返回承诺，但仍然允许您执行所有异步任务

对于初学者，传递给useEffect的函数不能是异步的。effect函数必须返回nothing（未定义）或cleanup函数。异步函数返回承诺。我还没有仔细查看您的代码，但“not a function”错误可能是react试图将您的承诺作为清理函数调用的结果。我尝试过去掉“async”，但现在它不允许我使用关键字“WAIT”，尽管我已经将“getWord”标记为“async”..在effect函数中定义一个新的异步函数并调用它。你能澄清一下你在这里想做什么吗？你为什么打电话给setInterval？什么是时间2？如果您只是尝试按顺序执行两个异步调用，请等待第一个，然后调用第二个，或者使用

链接它们。然后（）

@jalencford如果函数未定义为async“async myAsyncFunc（）=>{”语法是不正确的，我想……但我明白你们在说什么，这是有意义的，我会尝试定义一个异步函数内部的效用，然后只需调用iTIt工作，你们是了不起的，伟大的想法，只是创建一个新的异步功能，里面的一切，并调用它内有用的钩，请考虑投票/接受答案：

useEffect(() => {

    // call your function
myAsyncFunc(); <--- Here
    
async function myAsyncFunc () => {
await getWord();
const interval = setInterval(() =>{
time2 = time2 - 1;
        if (time2 == 0) {
clearInterval(interval);
          let dataURL = canvasRef.current.toDataURL();
          const db = firebase.firestore();
          db.collection("rooms").where("code", "==", code).get().then((querySnapshot) => {
            querySnapshot.docs.forEach((snapshot) => {
              snapshot.ref.collection("rounds").where("round", "==", round).get().then((querySnapshot) => {
                querySnapshot.docs.forEach((snapshot) => {
                  snapshot.ref.collection("pictures").add({artist: name, dataURL: dataURL, votes: 0}).then(() => {
                    setVoteTime2(true);
                  });
                });
              });
            });
          });
        }
    }, 1000);
}


}, []);