# 🏅Day33 - React 基礎練習 (10) - 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/fhljksmg-the-styleful/pen/emzzrem?editors=0011)，使用 useEffect 中呼叫 API `https://dog.ceo/api/breeds/image/random`，並把回傳的圖片 URL 顯示到畫面上。

<!-- 解答：

React.useEffect(() => {
async function fetchMyAPI() {
  const response = await fetch('https://dog.ceo/api/breeds/image/random');
  const responseJson = await response.json()
  setData(responseJson.message)
}

fetchMyAPI()
}, [])

-->

| Name | Codepen |
| -------- | -------- |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/MYeEyVr?editors=0011) |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/WbxZzQX) |
| Jin | [codepen](https://codepen.io/Jin-L/pen/XJKVmzx) |
| cks40660| [codepen](https://codepen.io/CKS40660/pen/PwzEPEG)|
| 老屠| [codepen](https://codepen.io/fsgfxvlb-the-selector/pen/YPWYygq?editors=0011)|
| 社子畢卡索| [codepen](https://codepen.io/pen?template=YPWYwKG)|
| Marco| [codepen](https://codepen.io/MarcoChiu/pen/pvbpgEq)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/RNRxrrp)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/QwEayjB?editors=0011)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/VYjyeJy)|
| 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/PwzENGV)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/NPrXRmJ?editors=0011)|
| andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/bNeaBwP?editors=0011)|
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/xbOpRzY?editors=0011)|
| 地瓜 | [CodePen](https://codepen.io/ChippyYU/pen/KwMZNwK?editors=1011)|
| 平平 | [CodePen](https://codepen.io/ypinpin/pen/RNRxprp)|
| Percy | [CodePen](https://codepen.io/Percy-Ku/pen/pvbwEpR)|
| Jenna | [CodePen](https://codepen.io/abiscc14/pen/XJKVgKq)|
|TWLeoC|[Codepen](https://codepen.io/TWLeoC/pen/gbMoGOd?editors=0011)|
| 7Red | [Codepen](https://codepen.io/cch2655/pen/dPXJdYJ) |
| wind | [Codepen](https://codepen.io/wind7y/pen/MYerGJL) |
| Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/LEZeJbG) |
| Eileen | [Codepen](https://codepen.io/Eileen-io/pen/yyJpxZm) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/xbOpwyo?editors=0011) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/OPXzrdE) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/OPXQLKL?editors=0011) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/myEXJOK?editors=0011) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/azZYNbv?editors=1111) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/emzMRpg?editors=0011) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/NPrMLoa?editors=1011) |