昨天提到 CRUD 中，我們還少了 Read&Update 的功能，但是在我們開始寫功能之前，我們回想一下，現在我們的資料格式是甚麼樣子。

[
  { "id": 1, "title": "做點什麼1", "desc": "這是todo1的detail" },
  { "id": 2, "title": "做點什麼2", "desc": "這是todo2的detail" },
  { "id": 3, "title": "做點什麼3", "desc": "這是todo3的detail" },
  { "id": 4, "title": "做點什麼4", "desc": "這是todo4的detail" },
  { "id": 5, "title": "做點什麼7", "desc": "這是todo7的detail" },
  { "id": 6, "title": "做點什麼8", "desc": "這是todo8的detail" },
  { "id": 7, "title": "做點什麼9", "desc": "這是todo9的detail" }
]

就是一個單純的 array，其中的物件包含 id,title,desc，這樣是不是還少了甚麼?
沒錯，我們還需要為 todo 資料加上一個 state，今天若是我們是 user 也不會希望每次進來資料都被清空吧?

[
    { "id": 1, "title": "做點什麼1", "desc": "這是todo1的detail", "isDone": false },
    { "id": 2, "title": "做點什麼2", "desc": "這是todo2的detail", "isDone": true },
    { "id": 3, "title": "做點什麼3", "desc": "這是todo3的detail", "isDone": false },
    { "id": 4, "title": "做點什麼4", "desc": "這是todo4的detail", "isDone": true },
    { "id": 5, "title": "做點什麼7", "desc": "這是todo7的detail", "isDone": false },
    { "id": 6, "title": "做點什麼8", "desc": "這是todo8的detail", "isDone": true },
    { "id": 7, "title": "做點什麼9", "desc": "這是todo9的detail", "isDone": false }
]

我們已經為全部的資料都加上一個是否完成的欄位，現在我們可以在一開始 call api 的時候就先對 todo 進行分類。
現在看到我們處理 api 的資料。

useEffect(() => {
    getTodoList()
        .then(res => {
            setTodoList(res.data.todoList);
        })
        .catch(err => console.log(err));
}, []);

現在我們是直接使用 api 的資料，但實務上這其實不是一個正確的作法，讓我們來修正一下吧。

useEffect(() => {
    getTodoList()
        .then(res => {
            console.log();
            const definedTodo = res.data.todoList.map(e => e);
            const todoArr = [];
            const doneArr = [];
            definedTodo.forEach(e => {
                e.isDone ? todoArr.push(e) : doneArr.push(e);
            });
            setTodoList(todoArr);
            setDoneTodo(doneArr);
            // setTodoList(res.data.todoList);
        })
        .catch(err => console.log(err));
}, []);

現在我們已經根據 todo 的完成狀態將資料分別塞進 2 個 array 之中，那是不是已經完成了呢?
確實，我們現在功能都是正常的，運行起來也沒有甚麼問題，但是我們這時候可以把剛剛寫個那段邏輯抽出來

useEffect(() => {
    getTodoList()
        .then(res => {
            arrSort(res.data.todoList);
        })
        .catch(err => console.log(err));
}, []);

/**
    * @description function for Sort todo isDone
    * @param {array} oriTodoArr
    */
const arrSort = oriTodoArr => {
    const definedTodo = oriTodoArr.map(e => e);
    const todoArr = [];
    const doneArr = [];
    definedTodo.forEach(e => {
        e.isDone ? todoArr.push(e) : doneArr.push(e);
    });
    setTodoList(todoArr);
    setDoneTodo(doneArr);
};

至於為什麼我們要這樣做呢?

1. 這樣可以保持useEffect中code的易讀性。
2. 若是有其他需求需要將array重新分類，我們可以將這段邏輯進行複用。