一般使用 setInterval(),setInterval() 方法會回傳 interval ID,我們可以透過 interval ID 將這個 setInterval() 清除 例如: ```js const intervalId = setInterval(() => { ... },1000) clearInterval(intervalId) ``` 當我們在 useEffect() 使用到 setInterval(),需要在元件移除時將 setInterval() 清除,可以在 useEffect() 裡面的 Effect 函式使用 return,並回傳另一個函式,這個函式會在該元件移除時被呼叫。 例如: ```js React.useEffect(() => { const intervalId = setInterval(() => { ... }, 1000) return => clearInterval(intervalId) },[]) ``` 這樣就可以透過 useEffect() 控制元件建立及移除時需要做的事。 ## 題目 請複製 (右下角 fork)這個[範例](https://codepen.io/hexschool/pen/vYQwXoj),在 Child 元件移除時執行 clear() 方法,完成後會呈現以下畫面。  ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看)  <!-- 解答: ``` function Child({count, setCount}) { React.useEffect(() => { const intervalId = setInterval(() => { setCount(pre => pre + 1); }, 1000) return () =>clearInterval(intervalId) },[]) return <h1>Child 元件: {count}</h1> } ``` --> 回報區 --- | # | Discord | CodePen / 答案 | |:---:|:-------:|:-------------:| | 1 | collinkao | [CodePen](https://codepen.io/collin0825/pen/NWeqOwj)| | 2 | 大頭 | [CodePen](https://codepen.io/d22495521/pen/qBLdJqg)| | 3 | LinaChen | [CodePen](https://codepen.io/LinaChen/pen/WNLvaMO) | | 4 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/VwqLEEY) | | 5 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/dywogJx) | | 6 | Evan | [Codepen](https://codepen.io/evanz1215/pen/XWobxyo) | | 7 |HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/dywogQP?editors=1010) | 8 | shcopy | [Codepen](https://codepen.io/shcopy/pen/dywogwP) | | 9 | ryan_chou | [Codepen](https://codepen.io/csw8524/pen/yLGNRGE) | | 10 | yuchih | [Codepen](https://codepen.io/hijachu/pen/PoXqyvp?editors=1010) | | 11 | Wendy3 | [Codepen](https://codepen.io/your-work/) | | 12| Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/ExGjdJJ) | | 13 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/RwEPqKV) | | 14 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/GRPJPZX) | | 15 | Aden | [Codepen](https://codepen.io/Osases/pen/zYyGypz) | | 16 | cataska | [Codepen](https://codepen.io/lovecankill/pen/qBLdLyY) | | 17 | smalljie | [Codepen](https://codepen.io/smalljie/pen/MWZwZQj) | | 18 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/MWZwZNo) | | 19 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/vYvObWY?editors=1010) | | 20 | Kaya | [Codepen](https://codepen.io/laron9486/pen/jOXPdxa) | | 21 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/jOXPdgx) | | 22 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/rNoVRoV) | | 23 | David0799 | [Codepen](https://codepen.io/David0799/pen/WNLvmYL) | | 24 | Lulu | [Codepen](https://codepen.io/Lin-Lulu/pen/wvRaZGO?editors=1010) | | 25 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/mdaJYpJ) | | 26 | Yen | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/jOXPjqp?editors=1010) | | 27 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/eYbNwKO?editors=0010) | | 28 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/BavNgRY?editors=0010) | | 29 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/poqJMNv?editors=0010) | | 30 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/PoXqMQg)| | 31 | orias_000 | [Codepen](https://codepen.io/qoq77416416/pen/bGOVGrM?editors=1010) | | 32 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/dywYyvX?editors=0010) | | 33 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/ZEVbYEG) | | 34 | Sebastian | [Codepen](https://codepen.io/SebastianWei/pen/jOXbEaE?editors=0010) | | 35 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/zYyvGmM) | | 36 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/GRPpJBo) | | 37 | Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/LYMpGmd?editors=0010) | | 38 | azami | [Codepen](https://codepen.io/azami/pen/RwEWGRy) | | 39 | Nikki | [Codepen](https://codepen.io/Nikki-Kang/pen/XWomjog) | | 40 | Kent | [Codepen](https://codepen.io/labkunz/pen/mdaeOWb?editors=1010) | | 41 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/jOXbVwm) | | 42 | 瑀君 | [Codepen](https://codepen.io/yennnnn/details/BavNeBN) | | 43 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/OJrypVo)| | 44 | Sui | [Codepen](https://codepen.io/suihsilan/pen/XWomxWa?editors=0010)| | 45 | rainnping | [Codepen](https://codepen.io/rainnping/pen/gOZaQOw) | | 46 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/oNJjQKB) | | 47 | curry | [Codepen](https://codepen.io/Ted19851223/pen/zYyveJL?editors=1010) | | 48 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/RwErKxG) | | 49 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/BavjJJG) | | 50 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/vYvOPaJ) | | 51 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/oNJbRjq?editors=1111) | | 52 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/poqgXvW) | | 53 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/ZEVbQzY) | | 54 | Iris | [Codepen](https://codepen.io/iris831206/pen/NWerPLO) | | 55 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/NWeNMqY) | | 56 | Cami | [Codepen](https://codepen.io/fayevivi/pen/NWerVRo) | | 57 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/NWeRwOR?editors=0011) | | 58 | Owen | [Codepen](https://codepen.io/owen-dong/pen/GRPrmvE?editors=0010) | | 59 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/gOZmvKW?editors=1010) | | 60 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/abPJgNv) | | 61 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/ZEVyEaN?editors=0011) | | 62 | Lydia | [Codepen](https://codepen.io/lydia-chen/pen/VwOpBMJ) | ```markdown= | 0 | user | [Codepen]() | ```
×
Sign in
Email
Password
Forgot password
or
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
Continue with a different method
New to HackMD?
Sign up
By signing in, you agree to our
terms of service
.