如何在nextJS中处理useRouter()的异步问题

Question

单击PublicMyTeam.js中的Link时它使用路由器传递查询(=el.group_name(。

// PublicMyTeam.js
<Link href={`/public/${el.group_name}`}>
<a><h1 className={styles.team_name}>{el.group_name}</h1></a>
</Link>

但由于useRouter()的异步问题，[group].js中的useEffect()出现了错误。

它不能读取dbService.collection(group)。

// [group].js
const router = useRouter()
const { group } = router.query
async function getGroupPlayers() {
const querySnapshot = await dbService.collection(group).doc('group_data').collection('players').get()
querySnapshot.forEach(doc => {
const singlePlayerObject = {
name: doc.data().name,
photoURL: doc.data().photoURL,
joined_date: doc.data().joined_date,
rating: doc.data().rating,
game_all: doc.data().game_all,
game_win: doc.data().game_win,
game_lose: doc.data().game_lose,
status: doc.data().status,
introduce: doc.data().introduce
}
setGroupPlayers(groupPlayers => [...groupPlayers, singlePlayerObject])
})
groupPlayers.sort((a, b) => b.rating - a.rating)
}
useEffect(() => {
getGroupPlayers()
}, [])

我该怎么办？

Answer 1

尝试将router添加到useEffect的依赖项数组中，并在调用getGroupPlayers()之前检查router.query.group。

useEffect(() => {
if (router.query.group) {
getGroupPlayers()
}
}, [router])

Answer 2

您可以尝试将整个异步函数的内容放入useEffect中，并使函数自调用

useEffect(() => {
(async function Update() {
return (await page.current) === reviews_page
? true
: set_reviews_page((page.current = reviews_page));
})();
}, [page.current, reviews_page]);

这对于我使用SWR配置的自定义分页非常有效。这是我解决相同问题的方法

如果你想阅读这个主题，它被称为IIFE(立即调用函数表达式(

所以，像这样的东西应该可以做到：

useEffect(() => {
(async function getGroupPlayers() {
const querySnapshot = await dbService.collection(group).doc('group_data').collection('players').get()
querySnapshot.forEach(doc => {
const singlePlayerObject = {
name: doc.data().name,
photoURL: doc.data().photoURL,
joined_date: doc.data().joined_date,
rating: doc.data().rating,
game_all: doc.data().game_all,
game_win: doc.data().game_win,
game_lose: doc.data().game_lose,
status: doc.data().status,
introduce: doc.data().introduce
}
setGroupPlayers(groupPlayers => [...groupPlayers, singlePlayerObject])
})
groupPlayers.sort((a, b) => b.rating - a.rating)
})();
}, [])

尽管如此，您可能需要添加一些条件逻辑，以便按预期执行(以及一两个生命周期依赖项(。使用useRef引用组或groupPlayers，只触发生命周期挂钩在componentDidUpdate上执行(类似于当page.current和reviews_page值不同时我如何更新状态(。page.current是reviews_page状态的useRef常量，如下所示：

const [reviews_page, set_reviews_page] = useState<number>(1);
const page = useRef<number>(reviews_page);