在 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 / 答案 |
|:---:|:-------:|:-------------:|
| 1 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/XWobKVb) |
| 2 | yuchih | [Codepen](https://codepen.io/hijachu/pen/QWzbExo?editors=1010)|
| 3 | Evan | [Codepen](https://codepen.io/evanz1215/pen/LYMVZrW) |
| 4 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/BavNzqq) |
| 5 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/wvRaWNR) |
| 6 | Wendy | [Codepen](https://codepen.io/wendy03/pen/JjwdRKO) |
| 7 | 大頭 | [Codepen](https://codepen.io/d22495521/pen/MWZwjmj?editors=1111) |
| 8 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/PoXqGWg) |
| 9 | Kent | [Codepen](https://codepen.io/labkunz/pen/abPOmwV) |
| 10 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/yLGNaEg) |
| 11 | shcopy | [Codepen](https://codepen.io/shcopy/pen/RwEPGqm) |
| 12 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/yLGNVyz?editors=0010) |
| 13 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/XWobNXY) |
| 14 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/abPOBZQ) |
| 15 | David0799 | [Codepen](https://codepen.io/David0799/pen/LYMVbyo) |
| 16 | Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/LYMVbQw) |
| 17 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/abPOBPg) |
| 18 | 金魚 | [Codepen](https://codepen.io/cso-goldfish/pen/YzdXpbW) |
| 19 | collinkao | [Codepen](https://codepen.io/collin0825/pen/XWobNwQ?editors=0010) |
| 20 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/abPOBeo) |
| 21 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/gOZpgxv) |
| 22 | smalljie | [Codepen](https://codepen.io/smalljie/pen/bGOdgox) |
| 23 | Iris | [Codepen](https://codepen.io/iris831206/pen/RwEPpZE) |
| 24 | Lulu | [Codepen](https://codepen.io/yaj55ushydna/pen/XWobKVb?editors=1010) |
| 25 | Kaya | [Codepen](https://codepen.io/laron9486/pen/jOXPByP) |
| 26 | Leo | [Codepen](https://codepen.io/Aruminiya/pen/qBLdmLW?editors=0010) |
| 27 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/NWeqvRQ?editors=0010) |
| 28 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/LYMVjjd?editors=0011) |
| 29 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/Jjwdrom?editors=0011) |
| 30 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/vYvOeOo?editors=0010) |
| 31 | Aden | [Codepen](https://codepen.io/Osases/pen/abPOLJQ) |
| 32 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/zYyGEZJ) |
| 33 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/vYvOWpJ) |
| 34 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/eYbNerY?editors=1010) |
| 35 | orias_000 | [Codepen](https://codepen.io/qoq77416416/pen/rNoVYoO?editors=1010) |
|36|HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/yLGNpRg?editors=1010)|
| 37 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/wvRayMW) |
| 38 | Tian | [codePen](https://codepen.io/ccyy915/pen/qBLdxKz) |
| 39 | rainnping | [codePen](https://codepen.io/rainnping/pen/oNJXqvj) |
| 40 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/YzdXegw) |
| 41 | Yen | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/qBLdXXx) |
| 42 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/rNoVmpq) |
| 43 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/JjwdvPN)|
| 44 | Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/xxmGzwa?editors=1010)|
| 45 | cataska | [Codepen](https://codepen.io/lovecankill/pen/jOXPXaP) |
| 46 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/ZEVGqdm) |
| 47 | Sui | [Codepen](https://codepen.io/suihsilan/pen/XWobOEx?editors=1010) |
| 48 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/bGOdJvb) |
| 49 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/zYyGVRx?editors=0011) |
| 50 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/OJrVKmq)|
| 51 | azami | [Codepen](https://codepen.io/azami/pen/vYvNBPL)|
| 52 | Sebastain | [Codepen](https://codepen.io/SebastianWei/pen/jOXbEmO?editors=0010) |
| 53 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/qBLOdjg) |
| 54 | Nikki | [Codepen](https://codepen.io/Nikki-Kang/pen/YzdyGRJ) |
| 55 | curry | [Codepen](https://codepen.io/Ted19851223/pen/OJryRzq?editors=1010) |
| 56 | Emily4869 | [Codepen](https://codepen.io/aptx4869Emily/pen/rNoxepp?editors=0010) |
| 57 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/xxmwQeZ?editors=0010) |
| 58 | curry | [Codepen](https://codepen.io/Ted19851223/pen/OJryRzq?editors=1010) |
| 59 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/RwErOzB) |
| 60 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/oNJxjNV?editors=0011) |
| 61 | Cami | [Codepen](https://codepen.io/fayevivi/pen/BavzarQ) |
| 62 | Owen | [Codepen](https://codepen.io/owen-dong/pen/qBLNpLN?editors=0011) |
| 63 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/RwEGGNW?editors=0011) |
| 64 | rChinnnn | [Codepen](https://codepen.io/rChinnnn/pen/JjwbBdJ) |
| 65 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/BavWJwy) |
| 66 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/abPJgzz) |
| 67 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/PoXjoKO?editors=0010) |
| 68 | Lydia | [Codepen](https://codepen.io/lydia-chen/pen/MWdpBjv?editors=1011) |

| 0 | user | [Codepen]() |