next.js 使用onClick React一次遍历一个数组

mqxuamgl 于 2023-08-04 发布在 React

关注(0)|答案(2)|浏览(144)

我正在尝试创建一个按钮，当按下时，它会循环通过一组特定的主题。此外，在显示最后一个主题后，它将循环回到数组的开头。我创建了一个handle函数，通过更新自定义react hooks函数useThemes，它将在各种主题之间循环。然而，我的尝试没有产生任何结果。这是我的代码，谢谢你的帮助。

const { theme, setTheme } = useTheme();

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

 let myIndex = 1;

 const handleColorChange = (e: any) => {
  setTheme(e.themes.name[myIndex].toLowerCase());
  myIndex = (myIndex + 1) % themes.length;
 };

       <button onClick={handleColorChange}>
          
        </button>

字符串

next.js

来源：https://stackoverflow.com/questions/76732645/looping-through-array-one-at-a-time-with-onclick-react

2条答案

按热度按时间

xriantvc1#

问题是在handlerColorChange方法中，你试图获取一个在e变量中不存在的属性，我认为你是想从themes数组中获取它。
试试这个：

const handleColorChange = (e: any) => {
  setTheme(themes[myIndex].name.toLowerCase());
  myIndex = (myIndex + 1) % themes.length;
 };

字符串

赞(0）回复(0）举报 2023-08-04

eh57zj3b2#

只需将主题索引存储在状态中。组件中的局部变量不会跨呈现器持久化。
举例来说：

const [themeIdx, setThemeIdx] = useState(0);
// or change this in your useTheme hook

const handleColorChange = (e: any) => {
    setThemeIdx((themeIdx + 1) % themes.length);
};
const theme = themes[themeIdx];

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 使用onClick React一次遍历一个数组

2条答案

相关问题

热门标签

最新问答