---
title: "useCycleList 用法與示例"
description: "循環瀏覽項目列表。"
canonical: https://reactuse.com/zh-Hant/state/usecyclelist/
---

# useCycleList

循環瀏覽項目列表


`useCycleList` 在一個值清單中循環切換，提供 `next`、`prev` 和 `go` 控制函式。它回傳當前值、當前索引和控制物件。到達清單末尾時會回到開頭（反之亦然），形成循環。

### 使用場景

- 建構在固定選項集之間循環的切換器（例如主題切換：淺色/深色/自動）
- 實作輪播或幻燈片的上一個/下一個導航
- 在預定義的值集合中循環選擇

### 注意事項

- **循環行為**：到達清單末尾後繼續會回到第一個元素，反之亦然。
- **索引控制**：`go` 函式接受索引值以直接跳到特定項目。
- **相關 hooks**：另請參閱 `useCounter` 用於數值遞增/遞減，以及 `useToggle` 用於兩個值之間的切換。

## Usage

```tsx live

function Demo() {
  const [state, next, prev] = useCycleList([
    "Dog",
    "Cat",
    "Lizard",
    "Shark",
    "Whale",
    "Dolphin",
    "Octopus",
    "Seal",
  ]);

  return (
    <div>
      <div>{state}</div>
      <div>
        <button onClick={() => next()}>下一個</button>
        <button onClick={() => prev()}>上一個</button>
      </div>
    </div>
  );
};

```

%%API%%