作業繳交 https://jsfiddle.net/jason60810/gwdn7c6f/6/ 1. try/catch:在使用async和await時,我們使用try/catch來進行錯誤處理。如果API請求或其他操作出錯,程式會立即跳到catch區塊。 2. finally:這部分用來更新UI,不論之前的操作成功或失敗,它都會執行。 3. async function 回傳 Promise:使用async宣告的函數會自動回傳一個Promise。即使函數內沒有明確返回值(return),它仍然會回傳一個解析為undefined的Promise,所以可以在函數執行完畢後使用.then()或await進行後續操作,如下: ``` fetchOrderDetails().then(() => { console.log("fetchOrderDetails has completed."); }); ```
作業繳交 https://jsfiddle.net/jason60810/9zd0wpjL/42/ then():用於處理成功的回應。這裡我們會獲得用戶ID和訂單ID。 catch():用於捕捉錯誤。例如,如果我們試圖獲取一個不存在的訂單ID,catch()會被觸發。 finally():不管成功或失敗,這一段總會被執行。在這裡,我們用它來隱藏loading提示。 因為jQuery自身不支持finally(),所以我用Promise.resolve()將jQuery的$.get()轉為原生的Promise,這樣我們就能使用finally()了。
作業繳交 https://jsfiddle.net/jason60810/9zd0wpjL/11/ 可以使用 array.at(-1).id 來取得最後一個 order 的 id 不用 array[ array.length - 1 ].id
vue 官方文件還有介紹測試的種類和推薦工具 [連結](https://vuejs.org/guide/scaling-up/testing.html) react 文件都沒有QwQ
以前用 java 覺得定義型別很麻煩,原來都是防止射自己的腳🤣
https://www.youtube.com/watch?v=Rr5AqASIyxw ## TL;DR - 在 JSX 使用 0 時,雖然是 falsy 但還是渲染出來 - [官方文件特別提醒要注意](https://react.dev/learn/conditional-rendering#logical-and-operator-:~:text=in%20its%20place.-,Pitfall,-Don%E2%80%99t%20put%20numbers) - [hackmd 版本](https://hackmd.io/@jason60810/BkKJwzk6h) ## Logical AND operator (&&) 在使用 `&&` 時要特別注意數字 0 的使用。 常見情況 : 根據是否是空陣列決定要不要印出陣列。 ### [範例程式碼](https://stackblitz.com/edit/react-uufonv?file=src%2FApp.js) ### 錯誤使用方法 1. 紅色 : 把 0 渲染出來 ### 解決方法 1. 變成布林值 1. 綠色 : 判斷是否大於 0 2. 綠色 : 利用兩個 `!!` 2. 橘色 : 使用 Logical OR operator (||) ![](https://i.imgur.com/ro0ODCW.png)
https://youtu.be/I7dwJxGuGYQ ## TL;DR - 在使用 useContext 時,一定要將其包裝成 custom hook - [好讀版本](https://hackmd.io/@jason60810/rklVqNUh2) - [React 官方文件新增了 TypeScript 使用專文](https://react.dev/learn/typescript?fbclid=IwAR3Pgkr8xpS48Vwa0ADo3oagaAPKX1q05jHhtbXH8ltV8MKwa8FAvePoXPU) - [英文版本](https://jason60810.hashnode.dev/always-use-a-custom-hook-for-context-api-not-usecontext-react-context-api-typescript) ## 資料夾結構 ( 使用 next app route ) ![](https://hackmd.io/_uploads/Bke6AE8n2.png) ### theme-context.tsx 一定要加上 `use client`,因為 useState 只能在 client component 運作 , **特別注意,就算這裡加了`use client`,所有的子層還是 server component (預設)** ![](https://hackmd.io/_uploads/BkF5REL3n.png) ### layout.tsx 加上 provider 之後,下面所有的子層都可以拿到值,不用用 prop 一個一個傳下去 ![](https://hackmd.io/_uploads/rJWXaVLnh.png) ### page.tsx ![](https://hackmd.io/_uploads/rJ-_ANI32.png) ### logo.tsx 1. 因為 useContext 要在 client component 運作,所以要加上 `use client`。 2. 當使用 useContext 時,一定要引入 ThemeContext,用起來很麻煩 3. 因為 ThemeContext 預設是 null,所以當不是在 provider 裡使用 `useContext` 時 ( Logo component ),會發生錯誤,因此需要先確認有 context ![](https://hackmd.io/_uploads/B1hAgrI23.png) 舉例:不是在 provider 裡使用 `useContext` ![](https://hackmd.io/_uploads/SkbYZrI23.png) ### 創建 custom hook ![](https://hackmd.io/_uploads/HJBffSI2n.png) ### 使用 custom hook 現在引入 ThemeContext 和處理錯誤的問題,已經抽離到 custom hook 中 ![](https://hackmd.io/_uploads/ByjYzr8n3.png) ### 加上型別 1. React.ReactNode,可以接受 JavaScript primitives ,如果只想要是 jsx 可以使用 React.ReactElement ( [react 官方文件](https://react.dev/learn/typescript#typing-children) ) 2. `type Theme` 可以讓 `useState` 在 get 和 set 時,可以使用正確的型別,例如:當想要 `setTheme('blue')` 時,會報錯,因為 `type Theme` 只有 'dark' 和 'light' 3. 在給予 createContext 型別時,可以利用 ts 的 union 讓 createContext 知道可能有 null 這個型別 ( [react 官方文件](https://react.dev/learn/typescript#typing-usecontext) ) ![](https://hackmd.io/_uploads/B13EHHI3h.png)
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!