在 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/yen-kg/pen/xxveggP?editors=1010)，使用 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 | MY | [Codepen](https://codepen.io/ahmomoz/pen/raBJKzv?editors=1111) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/azoPqNQ?editors=1011) |
| 3 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/PwYvrGw) |
| 4 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/mybYZMd) |
| 5 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/JoPqQpw) |
|6|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/JoPqQxV?editors=1011)|
| 7 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/OPLYedb?editors=1011) |
| 8 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/XJrwLvo?editors=1011) |
| 9 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/emOaqOP?editors=1011) |
| 10 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/YPKboXB) |
| 11 |han|[Codepen](https://codepen.io/iamHanCheng/pen/OPLYemy?editors=1111)|
| 12 |嚼勁先生|[Codepen](https://codepen.io/James520284/pen/RNbmXpK)|
| 13 |邵|[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/EaYBYGw?editors=1011)|
| 14 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/YPKoPvZ?editors=1010) |
| 15 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/dPbEBZE) |
| 15 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/ogvrzNv) |
| 16 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/jENjZRP?editors=0011)|
| 17 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/xbKoWNM) |
| 18 | Amanda | [Codepen](https://codepen.io/cym199922/pen/GgKbGbz) |
| 19 | Clove | [Codepen](https://codesandbox.io/p/sandbox/dyw72q) |
| 20 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/NPKZoLZ) |
| 21 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/dPybYJj) |
| 22 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/yyLLYZJ) |
| 23 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/ByayJoe?editors=1011) |
| 24 | Toung | [Codepen](https://codepen.io/Toung/pen/LEYEqgY) |
| 25 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/PwoNrdz?editors=1011) |
| 26 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/pvoEXPy?editors=1011) |
| 27 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/vEYWMBE?editors=001) |
| 28 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/azbaYje?editors=1111) |
| 29 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/myyoWap?editors=1011) |
| 30 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/vEOPPaZ?editors=1010) |
| 31 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/jEWyryG) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |