如何在 React 中通过点击按钮循环切换主题数组

本文介绍如何使用 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 (            switch to Next Theme ({themes[currentIndex].name})        ); };  export default ThemeToggleButton;

⚠️ 关键注意事项：

• 不要用 let/const 声明索引变量：它在每次函数组件重渲染时都会重新初始化，导致“永远卡在第2项”；
• 事件参数 e 不含主题数据：onClick 的 e 是合成事件对象，与 themes 数组无关，切勿尝试 e.themes…；
• 推荐使用 toLowerCase() 统一主题名格式，便于后续 css 类名匹配或条件渲染；
• 若需初始主题生效，可在组件挂载时调用一次 setTheme(themes[0].name.toLowerCase())，或由 useTheme 内部默认处理。

该方案简洁、可维护，且完全符合 React 的状态管理范式——所有可变状态均通过 useState 托管，确保 ui 与逻辑同步更新。