useSetState
類似於 class component 中的 setState
useSetState 提供類似 React 類別元件 this.setState 的行為——接受部分狀態物件並將其合併到當前狀態中,而非完全替換。這對於管理包含多個欄位的物件狀態很方便。
使用場景
- 管理包含多個欄位的表單狀態,每次只更新部分欄位
- 從類別元件遷移到函式元件時保持
setState的合併行為 - 簡化物件狀態的部分更新邏輯
注意事項
- 淺合併:狀態更新是淺合併,不是深度合併。巢狀物件不會被遞迴合併。
- 函式更新:也支援函式形式的更新(接收前一個狀態,回傳部分狀態物件)。
- 相關 hooks:另請參閱
useMap用於鍵值對管理,以及useBoolean用於布林狀態。
Usage
Live Editor
function Demo() { const [state, setState] = useSetState({ value1: "value1", value2: "value2" }); const { value1, value2 } = state; return ( <div> <p>value1: {value1}</p> <p>value2: {value2}</p> <button onClick={() => { setState({ value1: "value", }); }} > 改變值 </button> </div> ); };
Result
API
useSetState
Returns
readonly [T, (statePartial: Partial<T> | ((currentState: T) => Partial<T>)) => void]: 包含以下元素的元組:
- state 的當前值。
- 更新 state 值的函數。
Arguments
| 參數名 | 描述 | 類型 | 預設值 |
|---|---|---|---|
| initialState | 初始值 | T (必填) | - |