# 🏅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);
}
};
```
這個 ```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 發生變化時，會將更新值存放在暫存區
```
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：按下保存之後會把資料傳送到後端去。
* ### cancelEdit：關閉編輯模式。
## 編輯資料 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)|
Sign in with Wallet
Connect another wallet