一般使用 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
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up