React中通过onClick按钮逐个循环切换主题的实现问题

问题分析 #

你的代码存在三个核心问题导致无法正常工作：

1. 索引状态丢失：用let myIndex = 1声明的变量会在组件每次重新渲染时重置为1，无法保留切换进度
2. 错误的事件对象引用：e.themes.name[myIndex]完全错误，点击事件对象e并不包含themes属性，应该直接访问组件内定义的themes数组
3. 初始索引与当前主题不匹配：固定初始索引为1，会导致首次切换跳过与当前主题对应的位置，逻辑错位

修复后的完整代码 #

import { useState } from 'react';
import { useTheme } from './your-theme-hook'; // 替换为你的useTheme实际路径

const ThemeToggleButton = () => {
  const { theme, setTheme } = useTheme();

  const themes = [
    { name: "Normal" },
    { name: "Dark" },
    { name: "Forrest" },
    { name: "Pink" },
    { name: "Sky" },
    { name: "Strawberry" },
  ];

  // 根据当前主题初始化索引，保证切换逻辑和当前状态同步
  const [currentIndex, setCurrentIndex] = useState(() => {
    return themes.findIndex(t => t.name.toLowerCase() === theme) || 0;
  });

  const handleColorChange = () => {
    // 计算循环后的下一个索引
    const nextIndex = (currentIndex + 1) % themes.length;
    // 切换到下一个主题
    setTheme(themes[nextIndex].name.toLowerCase());
    // 更新索引状态
    setCurrentIndex(nextIndex);
  };

  return (
    <button onClick={handleColorChange}>
      切换主题（当前：{theme}）
    </button>
  );
};

export default ThemeToggleButton;

关键修复说明 #

• 使用useState存储currentIndex，确保组件重新渲染时索引状态不会丢失
• 初始化索引时通过findIndex匹配当前theme，保证切换起点和当前主题一致
• 移除对事件对象e的错误引用，直接使用组件内定义的themes数组
• 点击时先计算下一个循环索引，再同步更新主题和索引，逻辑清晰且不易出错

内容的提问来源于stack exchange，提问作者Marquis4484