您好 x.chlidren 是一個像是陣列的東西 ( HTMLCollection ), 印出來後會看到 ![](https://i.imgur.com/R4z1z9C.png) ```javascript // x.chlidren => 陣列 // x.chlidren[0] => 陣列裡的東西 const x = { children: [{ nodeName: "SPAN", textContent: 'test01' }, { nodeName: "INPUT", textContent: "" } ] } // x.children 是一個像是陣列的東西,所以在陣列裡面找 textContent 屬性會 error console.log(x.children.textContent) console.log(x.children[0].textContent) ```
hi zod 通常是拿來做表單或 api 資料的型別驗證, 我看到的大多作法是自己定義 type, 加上使用 react 的 ComponentProps, 這樣還可以獲得 html 的原始 props。 ```typescript import { ComponentProps } from "react"; type MyDivProps = ComponentProps<"div"> & { myProp: string; }; const MyDiv = ({ myProp, ...props }: MyDivProps) => { console.log(myProp!); return <div {...props} />; }; ``` 參考 : https://www.totaltypescript.com/react-component-props-type-helper
作業繳交 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
https://www.youtube.com/watch?v=Rr5AqASIyxw ## TL;DR - 在 JSX 使用 0 時,雖然是 falsy 但還是渲染出來 - [官方文件特別提醒要注意](https://react.dev/learn/conditional-renderi...
https://youtu.be/I7dwJxGuGYQ ## TL;DR - 在使用 useContext 時,一定要將其包裝成 custom hook - [好讀版本](https://hackmd.io/@jason60810/rklVqNUh2) - [React 官方文件新增了...
精選技術文章、免費程式設計資源、以及業界重要新聞!