useState TypeScript 陣列物件：徹底搞懂，告別踩坑！
嗨大家好！在 React 專案中使用 TypeScript，處理陣列物件時，你是不是常常覺得 useState 跟你想的不太一樣？明明設定好的陣列物件，為什麼更新狀態後會變成奇怪的東西？別擔心，今天我們就來徹底解開 useState TypeScript 陣列物件與普通陣列的區別，讓你再也不怕陣列物件更新出錯！
什麼是陣列物件？
簡單來說，陣列物件就是陣列中的每一個元素都是一個物件。例如，一個包含使用者資訊的陣列，每個物件代表一個使用者，包含姓名、年齡、郵件等等。這種資料結構在實際開發中非常常見，因為它可以有效地組織和儲存複雜的資料。
點我解鎖秘密！useState 與普通陣列的區別
當我們使用 useState 管理陣列物件時，需要注意一個重要的區別：React 會對狀態更新進行淺比較 (shallow comparison)。這意味著，如果我們直接修改陣列物件中的屬性，React 無法偵測到狀態的變化，因為陣列物件的引用 (reference) 沒有改變。這就導致了界面無法更新的問題。
正確更新陣列物件的方法
為了正確更新陣列物件，我們需要創建一個新的陣列物件，而不是直接修改原始陣列物件。以下是一些常用的方法：
- 使用展開運算符 (Spread Operator)：
newState = [...state, newObject]這樣會創建一個新的陣列，包含原始陣列的所有元素，以及新增的newObject。 - 使用 map() 方法：如果你需要修改陣列中的某個物件，可以使用
map()方法創建一個新的陣列，並在回調函數中修改物件的屬性。 - 使用 Immer：Immer 是一個可以讓你像直接修改狀態一樣編寫程式碼，但實際上會創建一個新的狀態的函式庫。
TypeScript 的強型別
TypeScript 的強型別特性在處理陣列物件時也发挥着重要作用。我们可以定义一个接口 (interface) 来描述陣列物件的類型，这样可以帮助我们避免类型错误，并提高代码的可读性和可维护性。例如：
interface User {
name: string;
age: number;
email: string;
}useState 的狀態类型： const [users, setUsers] = useState([]) 。
別再猶豫，馬上點擊獲取！
