---
# System prepended metadata

title: "\U0001F3C5Day 15 - Axios 基礎練習 (5) - 編輯資料功能"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day 15 - Axios 基礎練習 (5) - 編輯資料功能

## 編輯資料

編輯資料的操作行為可以分為 3 個部分：
1. 編輯的畫面操作：點擊按鈕，切換 input 編輯框顯示
2. 編輯的函式說明
3. 編輯資料 API 使用 PUT

以下為此 3 部分的程式碼邏輯與說明：

## 1. 編輯的畫面操作：點擊按鈕，切換 input 編輯框顯示

首先拿到資料的時候，會將所有的資料加上 `isEditing`：

```
const getTodos = async () => {
  try {
    const response = await axios.get(`${api}/todos`, {
      headers: { Authorization: token },
    });
    setTodos(response.data.data.map(todo => ({ ...todo, isEditing: false })));
  } catch (error) {
    console.error("取得資料失敗", error);
  }
};
```

![HitPawOnline_222714](https://hackmd.io/_uploads/rJKA87HFA.gif)

這個 ```isEditing``` 是用來判斷是否有點擊編輯按鈕。

所以當點擊編輯按鈕時，會透過 ```isEditing``` 等於 ```true``` 的方式來展開

```
{item.isEditing ? (
  <>
    <input
      type="text"
      value={editTodo[item.id] || item.content}
      onChange={(e) => onEditInputChange(e, item.id)}
    />
    <button onClick={() => saveTodo(item)} className="btn btn-primary ms-1">保存</button>
    <button onClick={() => cancelEdit(item.id)} className="btn btn-danger ms-1">取消編輯</button>
  </>
) : (
  <>
    {item.content}
    <button onClick={() => editTodoItem(item.id)} className="btn btn-secondary ms-1">編輯</button>
  </>
)}
```

---

## 2. 編輯的函式說明

點擊編輯按鈕展開之後，主要會有三個 function，分別是：
```onEditInputChange```、```saveTodo(item)```、```cancelEdit(index)```

* ### onEditInputChange：監聽 input 發生變化時，會將更新值存放在暫存區

![HitPawOnline_223253](https://hackmd.io/_uploads/Sy0bcmBKA.gif)

```
const onEditInputChange = (event, id) => {
  setEditTodo({
    ...editTodo,
    [id]: event.target.value,
  });
};
```

值得注意的是這裡多加了一個 id 的屬性，原因是我們會利用陣列 + id 索引的方式來呈現該筆資料

```
<input
  type="text"
  value={editTodo[item.id] || item.content}
  onChange={(e) => onEditInputChange(e, item.id)}
/>
```

所以一定要加上 id，才能正確地呈現每筆資料。

* ### saveTodo：按下保存之後會把資料傳送到後端去。

![HitPawOnline_224756](https://hackmd.io/_uploads/BkMgCQSKR.gif)

* ### cancelEdit：關閉編輯模式。

![螢幕錄影 2024-07-29 晚上10.58.22](https://hackmd.io/_uploads/SJBu1VrYA.gif)


## 編輯資料 API 使用 PUT 

編輯資料會使用到 `PUT` 的方式，我們會先帶入產品的 id，

接著在後方 data 帶入需要更改的資料內容

```js
const url = "example/api"

axios.put(`${url}/${ 要更新產品的id }`, data, {
    headers: {
      Authorization: token.value,
    },
  })
  .then(response => {
    console.log('資料更新成功:', response.data);
  })
  .catch(error => {
    console.error('更新資料時發生錯誤:', error);
  });
```

題目
---

了解編輯的資料處理邏輯後，請操作 [這個模板](https://codepen.io/fhljksmg-the-styleful/pen/RNaXWYa?editors=0011)，執行以下要求：

* 請完成 saveTodo 編輯資料的功能，並且當按下保存時，會關閉編輯模式，然後更新畫面。

備註：[詳細可以參考 API 文件](https://todolist-api.hexschool.io/doc/#/%E4%BB%A3%E8%BE%A6%E4%BA%8B%E9%A0%85/patch_todos__id__toggle)


<!-- 解答：
const saveTodo = async (item) => {
  const updatedContent = editTodo[item.id] || item.content;
  try {
    await axios.put(`${api}/todos/${item.id}`, { content: updatedContent }, {
      headers: { Authorization: token },
    });
    setTodos(todos.map(todo =>
      todo.id === item.id ? { ...todo, content: updatedContent, isEditing: false } : todo
    ));
} catch (error) {
    console.error("保存資料失敗", error);
  }
};

-->


| 名字        | 連結                                                                         |
| ----------- | ---------------------------------------------------------------------------- |
| 7lun        | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/MYeaQVq?editors=0010)     |
| Jin         | [Codepen](https://codepen.io/Jin-L/pen/EayVLdE)                              |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/QwEjjoL)                   |
| 老屠        | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/jErbxJy?editors=0011) |
| 地瓜        | [Codepen](https://codepen.io/ChippyYU/pen/gbMazQY?editors=0011)              |
| Marco       | [Codepen](https://codepen.io/MarcoChiu/pen/XJKmYJY)                          |
| Melanie     | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/vEKNjMq)              |
| Eileen      | [Codepen](https://codepen.io/Eileen-io/pen/myEeKVJ)                          |
| Nooooora    | [CodePen](https://codepen.io/Nora-Ch/pen/NPrGMer?editors=1011)               |
| RUDY        | [CodePen](https://codepen.io/Rudy-crw/pen/NPrGMZR?editors=0011)              |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/zxBvLVo)                           |
| Owen He     | [Codepen](https://codepen.io/owen1120/pen/WbxQgyw?editors=0010)              |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/vEKNzXV)                              |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/jErbvpM)                            |
| cks40660    | [Codepen](https://codepen.io/CKS40660/pen/QwEjBxP)                           |
| RyanC       | [Codepen](https://codepen.io/RyanYD/pen/PwzPyZZ)                             |
| wind        | [Codepen](https://codepen.io/wind7y/pen/wBWKEZM)                             |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/MYeaPZz?editors=0010)              |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/XJKmejx)                           |
| 社子畢卡索  | [Codepen](https://codepen.io/pen?template=myEJjbq)                           |
| cindy       | [Codepen](https://codepen.io/a50134/pen/wBWKRXB?editors=0011)                |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/MYeazjd?editors=0111)           |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/zxBveGL)                            |
| 星雪糖      | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/MYeaNBp?editors=0011) |
| Miikaa      | [Codepen](https://codepen.io/Miikaa/pen/EayVpLy)                             |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ZYOQYyB?editors=0011)  |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/xbOZZQj)                           |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/pvbgNbr)                            |
| Zem         | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/pvbgPdp)                  |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/LEZGLMW?editors=0011)            |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/myEVwYx?editors=0011) |
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/KwMVwwK)                            |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/NPrxzjb?editors=0011)           |
| Rogan       | [Codepen](https://codepen.io/RoganHsu/pen/ZYOWYJW?editors=0011)              |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/xbOVGBB?editors=0111) |
| kuolun      | [Codepen](https://codepen.io/kuolun/pen/ByzKYpy?editors=0011)                |
| 蛋白        | [Codepen](https://codepen.io/sjlu-0/pen/XJKKEPG)                             |
| tanuki      | [Codepen](https://codepen.io/tanuki320/pen/zxBBGPR?editors=0010)             |
| Vergil      | [CodePen](https://codepen.io/aglgvsie/pen/NPrNzPP)                           |
| 伊迪        | [CodePen](https://codepen.io/sorryFish/pen/ogLWxqL)                          | 
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/bNeRgex?editors=0011)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/zxBdrMp)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/jErGJYK?editors=0011)|
|Michelle|[Codepen](https://codepen.io/bastar_dize/pen/PwzOVxo?editors=0011)|