在 useEffect 依赖项中使用 'window' - NextJS

Question

我有一个 function 应该在window.performance.getEntriesByType("navigation")[0].type更改时运行。 我正在尝试使用 useEffect 执行此操作，但出现 window is not defined reference 错误。我应该如何在更改时运行 function？ 编辑：基本思想是，一个玩家可以创建一个房间，另一个人可以使用房间 ID 加入。 但如果主持人离开页面，房间应该关闭，或者如果其他玩家离开房间，玩家应该离开房间。

 useEffect(() => {
    interrupt()
  }, [window.performance.getEntriesByType("navigation")[0].type]);

async function interrupt(){

    if (players && currentRoom && window.performance.getEntriesByType("navigation")[0].type == 'reload') {
        const docRef = doc(db, "versus_ongoing", currentRoom)

        if(players.players[0].user == user.uid){
            deleteDoc(docRef)
        } else {
            await updateDoc(docRef, {
                players: players.players.filter(post => post.host == true)
            })
        }
      } else {
        console.info( "This page is not reloaded");
      }   
}

Answer 1

我认为 window 在挂载完成之前在 NextJS 中不可用，并且由于它在 deps 数组本身中引用 window，因此它实际上在此之前被消耗。

可悲的是，在 deps 数组中使用它无论如何都不会起作用，因为效果依赖项只能是 state 或 props -- 或者它不会在它改变时触发。

我对你的用例了解不够，但我认为window.performance.getEntriesByType("navigation")[0].type无论如何都不会改变？ 在这种情况下，您根本不需要在 deps 数组中使用它：

 useEffect(() => {
    interrupt()
  }, []);