本文介绍如何使用 react 实现点击按钮逐个切换预设主题，并在到达末尾后自动循环回首个主题，重点解决索引管理、状态更新及事件参数误用等常见问题。
在 React 应用中，实现“点击切换主题并循环”是一个典型的状态驱动交互场景。但初学者常因状态持久性缺失或事件对象误用导致逻辑失效——正如示例代码中 myIndex 被声明为普通变量（let myIndex = 1），每次渲染都会重置，无法维持跨点击的索引状态；同时 e.themes.name[myIndex] 错误地将原生事件对象 e 当作数据源，而实际应从 themes 数组中读取。
✅ 正确做法是：使用 useState 管理当前索引，确保其响应式且跨渲染持久化，并直接从 themes 数组安全取值：
import { useState } from 'react';
import { useTheme } from './useTheme'; // 假设自定义 Hook 返回 { theme, setTheme }
const ThemeToggleButton = () => {
const { theme, setTheme } = useTheme();
const themes = [
{ name: "Normal" },
{ name: "Dark" },
{ name: "Forrest" },
{ name: "Pink" },
{ name: "Sky" },
{ name: "Strawberry" },
];
const [currentIndex, setCurrentIndex] = useState(0); // ✅ 使用 state 持久化索引
const handleColorChange = () => {
// 更新主题为当前索引对应项，并自动循环到下一索引
setTheme(themes[currentIndex].name.toLowerCase());
setCurrentIndex((prev) => (prev + 1) % themes.length);
};
return (
<button onClick={handleColorChange}>
Switch to Next Theme ({themes[currentIndex].name})
</button>
);
};
export default ThemeToggleButton;⚠️ 关键注意事项：
- 不要用 let/const 声明索引变量：它在每次函数组件重渲染时都会重新初始化，导致“永远卡在第2项”；
- 事件参数 e 不含主题数据：onClick 的 e 是合成事件对象，与 themes 数组无关，切勿尝试 e.themes...；
- 推荐使用 toLowerCase() 统一主题名格式，便于后续 CSS 类名匹配或条件渲染；
- 若需初始主题生效，可在组件挂载时调用一次 setTheme(themes[0].name.toLowerCase())，或由 useTheme 内部默认处理。
该方案简洁、可维护，且完全符合 React 的状态管理范式——所有可变状态均通过 useState 托管，确保 UI 与逻辑同步更新。
