---
# System prepended metadata

title: "\U0001F3C5 Day 6｜React Hook - useEffect 呼叫 API"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 Day 6｜React Hook - useEffect 呼叫 API
在 useEffect 中呼叫 API，要特別注意使用方式，否則一不小心就會發生 loop 的情況而不斷 call API，以下就是會不斷 call API 的寫法：
```javascript=
// 錯誤示範 // 錯誤示範 // 錯誤示範
const [data, setData] = useState({})
useEffect(async () => {
  const response = await fetch('API_URL');
  const responseJson = await response.json()
  setData(responseJson)
});
```
如同昨天提到的，在沒有加入相依參數時，每次資料變動 useEffect 就會執行一次，也因此以上寫法當資料回來時變動 data 這個 state，useEffect 則再次執行，導致不斷輪迴下去。

正確的話需加上相依參數，寫法如下：
```javascript=
// 錯誤示範 // 錯誤示範 // 錯誤示範
const [data, setData] = useState({})
useEffect(async () => {
  const response = await fetch('API_URL');
  const responseJson = await response.json()
  setData(responseJson)
}, []);
```
當這樣寫時，你會看到 console 出現了錯誤，原因是 useEffect 不能直接使用 async 函式
![](https://i.imgur.com/cS8QDDK.png)

所以正確的寫法是，把 call API 的邏輯放到一個單獨的函式中，再呼叫它
```javascript=
React.useEffect(() => {
    async function fetchMyAPI() {
      const response = await fetch('API_URL');
      const responseJson = await response.json()
      setData(responseJson)
    }

    fetchMyAPI()
  }, [])
```



## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/oNqbBXW)，使用 useEffect 中呼叫 API `https://dog.ceo/api/breeds/image/random`，並把回傳的圖片 URL 顯示到畫面上。


## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
```
React.useEffect(() => {
    async function fetchMyAPI() {
      const response = await fetch('https://dog.ceo/api/breeds/image/random');
      const responseJson = await response.json()
      setData(responseJson)
    }

    fetchMyAPI()
  }, [])
```
-->


回報區
---


|         Discord         |                              CodePen / 答案                              |
|:-----------------------:|:------------------------------------------------------------------------:|
|        Rice#8043        |     [CodePen](https://codepen.io/hexschool/pen/oNqbBXW?editors=0111)     |
|       yunyun#5215       |           [CodePen](https://codepen.io/yun_yunni/pen/wvmXGEO)            |
|     DIANAxAKKO#4298     |     [Codepen](https://codepen.io/redfire29/pen/eYMKZQz?editors=1010)     |
|         hw#0715         |             [Codepen](https://codepen.io/Lhwei/pen/GRxGZwY)              |
|        棒腿#9350        |     [Codepen](https://codepen.io/frankHsu/pen/zYWaqeZ?editors=1010)      |
|        Ayre#0016        |    [Codepen](https://codepen.io/yichunlin09/pen/YzavqBv?editors=0010)    |
|        Shau#6400        |           [Codepen](https://codepen.io/shau-chen/pen/PoRaNrL)            |
|           aki           |             [codepen](https://codepen.io/aki168/pen/WNzywWe)             |
|       IceSam#7836       |            [Codepen](https://codepen.io/sam-hsu/pen/vYRrKBV)             |
|        LEO#7779         |            [codepen](https://codepen.io/nekorice/pen/OJvEXLY)            |
|       CofCat#9226       |     [codepen](https://codepen.io/cofcat456/pen/ExERyjw?editors=1112)     |
|         祥#9226         |     [codepen](https://codepen.io/cofcat456/pen/ExERyjw?editors=1112)     |
|        Kimi#2092        |           [codepen](https://codepen.io/a3216lucy/pen/MWVXeab)            |
|       huch09#1426       | [codepen](https://codepen.io/subarashii-huch09/pen/bGvKeqd?editors=1111) |
|       YuZhun#1362       |            [codepen](https://codepen.io/danzhun/pen/abYKZWY)             |
|        魚魚#0937        |            [codepen](https://codepen.io/fish0522/pen/WNzyxOw)            |
|      Eric Su#7798       |             [codepen](https://codepen.io/wc-su/pen/PoRazGr)              |
|       黃士桓#7654       |         [codePen](https://codepen.io/shr-huan-huang/pen/mdxKEmY)         |
|         翔#0859         |          [codePen](https://codepen.io/energy95272z/pen/MWVXebp)          |
|     Vada Chen#2055      |     [codePen](https://codepen.io/vadachen/pen/KKoeMmg?editors=1010)      |
|       露易莎#7673       |           [Codepen](https://codepen.io/louisa-lin/pen/YzavWrg)           |
|        威爾#1694        |            [CodePen](https://codepen.io/WILL_Wu/pen/bGvKevp)             |
|       連小艾#0791       |     [Codepen](https://codepen.io/bolaslien/pen/YzavWaM?editors=0010)     |
|      ChloeLo#4858       |            [Codepen](https://codepen.io/chloelo/pen/mdxKExN)             |
|       AllenW#1132       |      [Codepen](https://codepen.io/AllenW/pen/eYMKZPz?editors=1011)       |
|      Vita Ora#4585      |    [Codepen](https://codepen.io/showlovezz/pen/GRxGqBR?editors=0010)     |
|     Paper Ora#1658      |          [Codepen](https://codepen.io/paper_hsiao/pen/ExERybE)           |
|     Bumble幫啵#0255     |      [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/jOzKrvB)      |
|       布魯諾#7239       |     [Codepen](https://codepen.io/bruno-yu/pen/bGvKeje?editors=1010)      |
|        niel#2413        |     [Codepen](https://codepen.io/danielhsu/pen/vYRrKvo?editors=1010)     |
|       lloydd#8224       |           [Codepen](https://codepen.io/thanatus25/pen/dymKXLE)           |
|      IreneLee#7932      |     [Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/RwMJRXN)      |
|       JarDar#6980       |           [codepen](https://codepen.io/jardarpen/pen/qBoKaJd)            |
|      rainbow#3329       |    [codepen](https://codepen.io/g901612002/pen/PoRabqQ?editors=1010)     |
|      LinaChen#1796      |            [codepen](https://codepen.io/LinaChen/pen/QWmxGjz)            |
|        L0F0#8733        |       [codepen](https://codepen.io/l0f0/pen/xxWzRGZ?editors=0010)        |
|     hiYifang #0736      |            [codepen](https://codepen.io/hiYifang/pen/gOeKLpo)            |
|       wenyun#2362       |     [codepen](https://codepen.io/wenyuncc/pen/zYWaoqG?editors=0011)      |
|      JessSong#5050      |           [codepen](https://codepen.io/jssanji03/pen/wvmXogY)            |
|        無名#6427        |            [codepen](https://codepen.io/Nomoney/pen/WNzyorY)             |
|       Tsuei#9284        |     [CodePen](https://codepen.io/AlbertoLL/pen/MWVXjmq?editors=1011)     |
|   Carolkiki2003#7399    |            [CodePen](https://codepen.io/wasfzuig/pen/gOeKLxK)            |
|     john21429#9434      |     [CodePen](https://codepen.io/john21429/pen/LYdrbBz?editors=1010)     |
|        葉秋#2335        |     [CodePen](https://codepen.io/john21429/pen/LYdrbBz?editors=1010)     |
|         YJ#1839         |     [Codepen](https://codepen.io/cshjufxc/pen/abYKBxw?editors=1111)      |
|       wiimax#4564       |            [Codepen](https://dog.ceo/api/breeds/image/random)            |
|       Chelly#6129       |     [Codepen](https://codepen.io/chellyhsu/pen/LYdrbxW)     |
|       Yanyan#3555       |    [Codepen](https://codepen.io/wei-yi-lee/pen/XWEYNeX?editors=1010)     |
|        yuyu#6310        |     [Codepen](https://codepen.io/yuyu0905/pen/poLKRog?editors=1010)      |
|       Shani#4593        |            [Codepen](https://codepen.io/ShaniMa/pen/poLKRrR)             |
|       Doris#1140        |           [Codepen](https://codepen.io/doris79588/pen/JjLZEJZ)           |
|       HedgehogKU        |   [CodePend](https://codepen.io/hedgehogkucc/pen/poLKRLe?editors=1010)   |
|      Timothy#5863       |  [CodePend](https://codepen.io/timothy_hippo/pen/rNdKLbv?editors=1011)   |
|        SHIN#6075        |            [CodePen](https://codepen.io/shin9626/pen/GRxGWEj)            |
|       BEAN #8402        |     [CodePen](https://codepen.io/Beanhuang/pen/bGvKqJM?editors=0010)     |
|       Morris#8755       |     [Codepen](https://codepen.io/morrisss/pen/bGvKqXK?editors=1010)      |
|         Wu#0167         |           [Codepen](https://codepen.io/Xander0705/pen/poLKemq)           |
|       眼睛 #0314        |          [Codepen](https://codepen.io/thrizzacode/pen/YzavGLW)           |
|   Midnightdinner#6220   |           [Codepen](https://codepen.io/woowooyong/pen/ExERmwy)           |
|       Yihan#5560        |    [Codepen](https://codepen.io/h513hh513h/pen/WNzyOqp?editors=1011)     |
|        shin#5792        |      [Codepen](https://codepen.io/hah1030/pen/OJvEjzm?editors=0010)      |
|         TedWang         |    [Codepen](https://codepen.io/wangtaiyan/pen/BarVdqm?editors=1010)     |
|         Mr.Sean         |     [Codepen](https://codepen.io/sean_1215/pen/LYdrjvG?editors=1111)     |
|        Wins#8457        |    [Codepen](https://codepen.io/winszhuang/pen/rNdKzbE?editors=1111)     |
|     Dylan_Lin#7320      |     [Codepen](https://codepen.io/lin-dylan/pen/wvmXrBj?editors=1011)     |
|        ZengZeng         |            [Codepen](https://codepen.io/tyzyoko/pen/mdxKBEq)             |
|     Joechiboo#3960      |           [Codepen](https://codepen.io/joe-chiboo/pen/eYMKGRm)           |
|        𝔼.𝕎#4742         |           [Codepen](https://codepen.io/kidult316/pen/yLKEzPB)            |
|     kyle890721#1016     |           [Codepen](https://codepen.io/KYLE890721/pen/abYKLRJ)           |
|       easton#3863       |       [Codepen](https://codepen.io/EastonIsCodingNow/pen/jOzKaEP)        |
|        lingxuan         |          [Codepen](https://codepen.io/lingxuan0618/pen/VwXdrvB)          |
|       Kenge#3690        |             [Codepen](https://codepen.io/pgkusn/pen/oNqyoeP)             |
|       Claire#2116       |    [Codepen](https://codepen.io/claire-chang-the-bashful/pen/dymKZKa)    |
|        薯餅#3581        |         [Codepen](https://codepen.io/ColdingPoTaTo/pen/bGvKYNX)          |
|      Stanley#2505       |           [Codepen](https://codepen.io/bigbearada/pen/QWmxOaE)           |
|       紅豆豆#0518       |            [Codepen](https://codepen.io/zoseqlpc/pen/PoRaEYZ)            |
|      JimHwang#3594      |            [Codepen](https://codepen.io/jimh1129/pen/dymKJzP)            |
|        時雨#8837        |    [Codepen](https://codepen.io/jjustin-35/pen/MWVXrLL?editors=0010)     |
|        emma#3398        |      [Codepen](https://codepen.io/itsems/pen/KKoeQwb?editors=0010)       |
|       Ryder#7398        |          [Codepen](https://codepen.io/rider159159/pen/WNzyMvg)           |
|       史蒂夫#5075       |           [Codepen](https://codepen.io/TaroPanda/pen/XWEYZbr)            |
|        城堡#2126        |           [Codepen](https://codepen.io/tthcastle/pen/ZExRrQd)            |
|      kir4che#7701       |            [Codepen](https://codepen.io/kir4che/pen/LYdrQJj)             |
|      NinaKuo#3332       |          [Codepen](https://codepen.io/ninakuo0814/pen/bGvKLOJ)           |
|        喬喬#2824        |    [Codepen](https://codepen.io/joanne-wei/pen/WNzyzKx?editors=1011)     |
|       灰塵貓#7994       |     [Codepen](https://codepen.io/rjk66268/pen/RwMJMmb?editors=0011)      |
|     Robert Lo#7994      |     [Codepen](https://codepen.io/Robert-Lo/pen/yLKEEVW?editors=1010)     |
|       GL Lo#2256        |             [Codepen](https://codepen.io/4genie/pen/VwXdBNO)             |
|       Anson#3594        |   [Codepen](https://codepen.io/huanmingchang/pen/JjLZmZW?editors=1111)   |
|       Arista#5802       |          [Codepen](https://codepen.io/arista-hsieh/pen/LYdrXXX)          |
|    真．穎旻粉撕#4995    |            [Codepen](https://codepen.io/gbnbihif/pen/VwXdVNN)            |
|       Mitour#0672       |      [CodePen](https://codepen.io/mitour/pen/NWYzeLX?editors=0011)       |
|        Nico#8739        |             [Codepen](https://codepen.io/Nicof2e/pen/mdxKajO)             |
|        zzly#9134        |              [Codepen](https://codepen.io/ly00/pen/WNzyPrg)              |
|       Kelvin#3296       |          [Codepen](https://codepen.io/kelvinchang/pen/KKoeJVb)           |
|       EvaLin#4546       |    [Codepen](https://codepen.io/evalin0316/pen/XWEYGdM?editors=1010)     |
|     christina#6185      |           [codepen](https://codepen.io/chrisc0210/pen/NWYzJgP)           |
|         JC#8658         |           [Codepen](https://codepen.io/jcsamoyed/pen/jOzKREw)            |
|      山貓(焜)#7041      |            [Codepen](https://codepen.io/pen?template=ExERJwr)            |
|        RON#2813         |             [Codepen](https://codepen.io/Ron115/pen/mdxKaJy)             |
| React-慧茹(拉拉醬)#3414 |   [Codepen](https://codepen.io/lala-lee-jobs/pen/yLKErGR?editors=1010)   |
|      YenYing#4029       |    [Codepen](https://codepen.io/yenying0804/pen/eYMKowo?editors=1010)    |
|     Sabrina77#1675      |         [Codepen](https://codepen.io/sabrina-huang/pen/GRxGaEy)          |
|      MarsKuo#6015       |            [Codepen](https://codepen.io/MarsKuo/pen/dymKBbd)             |
|          阿暟           |   [Codepen](https://codepen.io/patrickrrr007/pen/yLKEWod?editors=0011)   |
|  charlottelee849#0366   |   [Codepen](https://codepen.io/charlotte-lee/pen/QWmxRXe?editors=1010)   |
|      Evileye#0666       |             [codepen](https://codepen.io/gn-lin/pen/vYRrowy)             |
|          moitw          |      [codepen](https://codepen.io/tsuifei/pen/NWYzZJr?editors=0011)      |
|        Otis#8455        |     [codepen](https://codepen.io/humming74/pen/eYMjmNM?editors=1111)     |
|      Evachan#5729       |             [codepen](https://codepen.io/Eva-go/pen/yLKqyPj)             |
|      TaoDoris#5230      |     [codepen](https://codepen.io/taomaomao/pen/vYRaOVp?editors=1010)     |
|       ねこ*#9385        |           [Codepan](https://codepen.io/kunpao0104/pen/WNzKvPW)           |
|     Murmurline#6969     |           [Codepen](https://codepen.io/hexschool/pen/oNqbBXW)            |
|       Chaim#5739        |            [Codepen](https://codepen.io/hgit915/pen/bGvjdOz)             |
|          雅帆           |    [Codepen](https://codepen.io/yafanchung/pen/abYjNRm?editors=1010)     |
|     whatsupmm#6761      |            [Codepen](https://codepen.io/meidada/pen/WNzKjmW)             |
|           Ada           |     [Codepan](https://codepen.io/zggsoagv-the-scripter/pen/vYRaJEq)      |
|       Yiling#4054       |      [Codepan](https://codepen.io/lin010/pen/MWVBvgv?editors=1011)       |
|       Overy#4545        |         [Codepen](https://codepen.io/oceanwhale52hz/pen/KKoBvqX)         |
|        彼得#1923        |            [Codepen](https://codepen.io/shiou-ho/pen/MWVBvdP)            |
|       黑白兔#0684       |           [Codepen](https://codepen.io/johnny329/pen/wvmxrLR)            |
|        鮪杰寶貝         |      [codepan](https://codepen.io/wei-nie/pen/gOejoKw?editors=0011)      |
|     JimmyChang#5558     | [codepan](https://codepen.io/JimmyChangWenChi/pen/JjLBMvq?editors=1010)  |
|       KuoMin#4931       |             [codepan](https://codepen.io/KuoMin/pen/ZExjvqM)             |
|    andersonshen#4675    |       [codepan](https://codepen.io/luxyenni-the-bold/pen/ExEpQdK)        |
|       hungya#0773       |     [codepan](https://codepen.io/hungya777/pen/poLZVqV?editors=0010)     |
|        Neal#0665        |      [codepan](https://codepen.io/neallkf/pen/zYWLaqg?editors=1010)      |
|     Carol Li #2269      |    [Codepen](https://codepen.io/carolli834/pen/NWYBeBg?editors=1010)     |
|     kevinhes #2881      |     [CodePen](https://codepen.io/kevinhes/pen/VwXGwbX?editors=0011)      |
| Alex Liao#8538 | [CodePen](https://codepen.io/alex0207s/pen/WNzgwZy) |
| anby#7112 | [CodePen](https://codepen.io/andy-ch-bo-an/pen/JjLaOEN) |
| 座標33129#8748 | [CodePen](https://codepen.io/ad80352/pen/qBoMELz) |
| 許揚民 Evan#4546 | [CodePen](https://codepen.io/gitevanhsu/pen/dymqjOV?editors=0011) |
| Evonne#7078| [CodePen](https://codepen.io/Hsu1Fang/pen/wvmYMJB?editors=1011) |
| Rikku#1756| [CodePen](https://codepen.io/rikkubook/pen/BarVmRB?editors=1011) |
| Rocker#6235| [CodePen](https://codepen.io/RockerLi/pen/OJvBMeX) |
|雪莉#4827| [CodePen](https://codepen.io/utshang216/pen/jOzeBLM) |
|SeanYH#9025|[CodePen](https://codepen.io/paizohhm-the-bold/pen/eYMPvoM?editors=0010) |
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/rNdqmOZ)|
|Cherry ZY#4647|[CodePen](https://codepen.io/qoosdd89382/pen/MWVPvMr?editors=0010)|
|𝓛𝓊𝒸𝓎#8635|[CodePen](https://codepen.io/lucygirl/pen/LYdgeXM)|
|蘇蘇#0426|[CodePen](https://codepen.io/sabine1123/pen/jOzeQLJ)|
|Louise|[Codepen](https://codepen.io/LouiseHuang/pen/zYWmMMK)|
|Mori#5582|[Codepen](https://codepen.io/flower9312/pen/MWVPNdE)|
|hsiuhsiu #7412|[Codepen](https://codepen.io/hsiuhsiu/pen/gOeQMrG?editors=0010)|
|VicSun| [Codepen](https://codepen.io/hsuan333/pen/yLKQpdb) |
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/OJvaKgq)|
|minfan#8960|[codepen](https://codepen.io/minfan-chen/pen/dymwbVE?editors=1011)
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/zYWyJRN?editors=1011)
|陳sam#9117|[Codepen](https://codepen.io/euldpliv/pen/OJvdqbR?editors=1010)
|Rose#1669|[Codepen](https://codepen.io/Rose-Wu/pen/GRxeKxa?editors=1010)
|Hobby#6565|[Codepen](https://codepen.io/hobbyling/pen/gOeEMra)
|eching#9183|[Codepen](https://codepen.io/echin/pen/jOzJymG)
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/wvmOeqg)
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/xxWBoGJ?editors=1111)
| 龜人#7299 | [Codepen](https://codepen.io/dullshen/pen/RwMOWKX?editors=1111) |
| larahuang#8309 | [Codepen](https://codepen.io/lara1105huang/pen/eYMoKYY) |
| 鉛筆 #7763 | [Codepen](https://codepen.io/zoeguava/pen/eYMoQOW) |
| SunnyCheng#4113 | [Codepen](https://codepen.io/Sunny0509/pen/OJvYyPe) |
| ninipopo#7983 | [Codepen](https://codepen.io/Robinnini/pen/ExEqBem?editors=1010) |
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/LYmYxjb)
|SleepWalk#1635|[Codepen](https://codepen.io/arthurliinn/pen/LYmLWZZ?editors=1011)
| 楓之聲#6945 |[Codepen](https://codepen.io/sshane258/pen/gOzdMbY)|
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/dyLqOxo)|

