/

在條件語句中可以使用React hooks嗎？

在條件語句中可以使用React hooks嗎？

不行。

我不知道具體的技術原因，但是這是不可能的。

我在使用SWR和特別是useSWR hook時碰到了這個問題。

1
const ({ data } = useSWR(`/api/user`, fetcher)

我想在使用者登錄時只從API中檢索一些數據，並且我想“好的，我可以這樣做”:

1
2
3
4
5
let data

if (loggedIn) {
 ;({ data } = useSWR(`/api/user`, fetcher)
}

但是..不行。

React會在控制台中報錯，可能會顯示如下的錯誤訊息：

警告: React檢測到Hooks調用的順序在Course中發生了變化。如果不修正，這將導致錯誤和bug。

解決方案取決於使用的hook。在這種情況下，useSWR hook提供了一個非常快速和高效的解決方案，因為我可以將API端點替換為null以避免加載數據：

1
const ({ data } = useSWR(loggedIn ? `/api/user` : null, fetcher)

我將條件語句放在應用hook的內部，這使它對我起作用了。

tags: [“React”, “hooks”, “conditional rendering”, “useSWR”]