React useState TypeScript 陣列物件：新手也能輕鬆上手！
相信很多前端工程師在用 React 搭配 TypeScript 的時候，常常會遇到需要管理陣列物件的情況。比如說，一個待辦事項清單，一個商品列表，或者是一堆使用者資料。這時候，useState 搭配 TypeScript 的陣列類型就派上用場了！但一開始總是會覺得有點卡卡，不知道怎麼正確設定類型，導致一堆錯誤。別擔心！這篇文章會用最簡單、最口語化的方式，帶你一步步搞懂如何在 React 中使用 useState 管理 TypeScript 陣列物件，保證你看完就能上手，不再害怕 TypeScript！
基礎概念：TypeScript 陣列物件類型定義
首先，我們要搞清楚 TypeScript 裡陣列物件的類型怎麼定義。假設我們有一個物件，裡面有 id (number) 和 name (string) 兩個屬性，那麼我們可以這樣定義：
interface MyObject {
id: number;
name: string;
}
接著，如果我們要定義一個由這種物件組成的陣列，就可以這樣寫：MyObject[]。簡單來說，[] 就是表示陣列，裡面放的就是 MyObject 這種物件。記住這個觀念，後面的設定就輕鬆多了！
實戰範例：使用 useState 管理待辦事項清單
現在，讓我們用一個實際的例子來演示如何使用 useState 管理 TypeScript 陣列物件。我們來建立一個簡單的待辦事項清單。
import React, { useState } from 'react';
interface Todo {
id: number;
text: string;
completed: boolean;
}
const TodoList: React.FC = () => {
const [todos, setTodos] = useState([]);
// ... 其他程式碼
};
在這裡，我們定義了一個 Todo 介面，描述了待辦事項物件的結構。然後，我們使用 useState 宣告了一個名為 todos 的狀態變數，它的類型是 Todo[]，也就是待辦事項物件的陣列。一開始，這個陣列是空的。重點是 useState，這個 Todo 物件的陣列。
進階技巧：更新陣列物件
接下來，我們需要知道如何更新這個陣列。在 React 中，我們不應該直接修改狀態變數，而是應該使用 setTodos 這個函數。例如，要新增一個待辦事項，我們可以這樣做：
const addTodo = (text: string) => {
const newTodo: Todo = {
id: Date.now(),
text,
completed: false,
};
setTodos([...todos, newTodo]);
};
這裡，我們使用展開運算符 ... 將現有的 todos 陣列複製一份，然後將新的 newTodo 物件加到陣列的後面。這樣就建立了一個新的陣列，並將它設定為新的 todos 狀態。記住，每次更新狀態，都要建立一個新的陣列或物件，而不是直接修改現有的物件！
總結：掌握 useState TypeScript 陣列物件，輕鬆打造功能豐富的 React 應用程式
透過這篇文章，相信你已經對如何在 React 中使用 useState 管理 TypeScript 陣列物件有了更深入的了解。記住，定義好物件的介面，正確設定 useState 的類型，並在更新狀態時建立新的陣列或物件，是確保程式碼正確性和可維護性的關鍵。只要掌握這些技巧，你就能輕鬆打造出功能豐富、穩定可靠的 React 應用程式！
