---
title: "useMap 用法與示例"
description: "管理 Map 的 React hook。適用於 React 開發中需要管理鍵值對數據的場景。"
canonical: https://reactuse.com/zh-Hant/state/usemap/
---

# useMap

管理 Map 的 React hook。

`useMap` 提供一個響應式的 `Map` 資料結構。它回傳一個包含 `Map` 實例和操作函式（`set`、`delete`、`clear`、`reset`）的元組。每次修改操作都會觸發重新渲染以反映最新狀態。

### 使用場景

- 管理鍵值對集合並在值變更時觸發 UI 更新
- 建構需要高效查找和更新的標籤系統或篩選器
- 替代使用物件來管理動態鍵值對資料

### 注意事項

- **不可變更新**：每次修改操作會建立新的 `Map` 實例以觸發 React 重新渲染。
- **初始值**：接受初始鍵值對作為建構參數。
- **相關 hooks**：另請參閱 `useSetState` 用於物件狀態的部分更新。

## Usage

```tsx live
function Demo() {
  const { map, set, get, remove, has, clear, reset, size } = useMap([
    ['react', '18.0.0'],
    ['vue', '3.0.0'],
  ]);

  return (
    <div>
      <p>Map 大小: {size}</p>
      <div style={{ marginBottom: 16 }}>
        <button
          type="button"
          onClick={() => set('angular', '16.0.0')}
          style={{ marginRight: 8 }}
        >
          添加 Angular
        </button>
        <button
          type="button"
          onClick={() => set('react', '18.2.0')}
          style={{ marginRight: 8 }}
        >
          更新 React
        </button>
        <button
          type="button"
          onClick={() => remove('vue')}
          style={{ marginRight: 8 }}
        >
          刪除 Vue
        </button>
        <button
          type="button"
          onClick={clear}
          style={{ marginRight: 8 }}
        >
          清空所有
        </button>
        <button
          type="button"
          onClick={reset}
          style={{ marginRight: 8 }}
        >
          重置
        </button>
      </div>
      <div>
        <p>當前條目：</p>
        <ul>
          {Array.from(map.entries()).map(([key, value]) => (
            <li key={key}>
              {key}: {value} 
              {has(key) && ' ✓'}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <p>獲取 React 版本：{get('react') || '未找到'}</p>
      </div>
    </div>
  );
};
```

%%API%%