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 (必填)-