---
tags: 2022 React 新手讀書會
---
# 🏅 Day 6｜React Hook - useEffect 呼叫 API
在 useEffect 中呼叫 API，要特別注意使用方式，否則一不小心就會發生 loop 的情況而不斷 call API，以下就是會不斷 call API 的寫法：

// 錯誤示範 // 錯誤示範 // 錯誤示範
const [data, setData] = useState({})
useEffect(async () => {
  const response = await fetch('API_URL');
  const responseJson = await response.json()
  setData(responseJson)
});

如同昨天提到的，在沒有加入相依參數時，每次資料變動 useEffect 就會執行一次，也因此以上寫法當資料回來時變動 data 這個 state，useEffect 則再次執行，導致不斷輪迴下去。

正確的話需加上相依參數，寫法如下：

// 錯誤示範 // 錯誤示範 // 錯誤示範
const [data, setData] = useState({})
useEffect(async () => {
  const response = await fetch('API_URL');
  const responseJson = await response.json()
  setData(responseJson)
}, []);

當這樣寫時，你會看到 console 出現了錯誤，原因是 useEffect 不能直接使用 async 函式

所以正確的寫法是，把 call API 的邏輯放到一個單獨的函式中，再呼叫它

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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

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)|