jason chen · 08月13日

useContext 常犯錯誤與如何在 TS 使用

https://youtu.be/I7dwJxGuGYQ

TL;DR

一定要加上 use client，因為 useState 只能在 client component 運作， 特別注意，就算這裡加了use client，所有的子層還是 server component (預設)

加上 provider 之後，下面所有的子層都可以拿到值，不用用 prop 一個一個傳下去

因為 useContext 要在 client component 運作，所以要加上 use client。
當使用 useContext 時，一定要引入 ThemeContext，用起來很麻煩
因為 ThemeContext 預設是 null，所以當不是在 provider 裡使用 useContext 時 ( Logo component )，會發生錯誤，因此需要先確認有 context

舉例:不是在 provider 裡使用 useContext

現在引入 ThemeContext 和處理錯誤的問題，已經抽離到 custom hook 中

React.ReactNode，可以接受 JavaScript primitives ，如果只想要是 jsx 可以使用 React.ReactElement ( react 官方文件 )
type Theme 可以讓 useState 在 get 和 set 時，可以使用正確的型別，例如:當想要 setTheme('blue') 時，會報錯，因為 type Theme 只有 'dark' 和 'light'
在給予 createContext 型別時，可以利用 ts 的 union 讓 createContext 知道可能有 null 這個型別 ( react 官方文件 )

2個讚 1留言 1,066瀏覽

按讚的人：

共有 1 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

站長阿川 8個月前

很棒的分享！善用 context 跟 custom hook 的話，可以大幅改善 code quality！

很多 state 可以拆分出來，放到更適合的地方！

期待你分享更多好文章！

1個讚回覆

按讚的人：

留言......

此人尚未填寫簡介。