1

当我单击它时Link，PublicMyTeam.js 它使用路由器传递查询（= el.group_name）。

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

但是由于 的异步问题，在中useRouter()发生了错误。useEffect()[group].js

它无法读取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()
}, [])

我该怎么办？

4

2 回答 2

1

您可以尝试将整个异步函数的内容放在 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)
 })();
}, [])

虽然，您可能希望添加一些条件逻辑以使其按预期执行（以及一个或两个生命周期依赖项）。对引用 group 或 groupPlayers 进行 useRef 并仅触发生命周期挂钩以在 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);
于 2021-05-29T23:31:02.317 回答
1

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

useEffect(() => {
    if (router.query.group) {
        getGroupPlayers()
    }
}, [router])
于 2021-05-30T16:47:27.527 回答