在React中在计时器上切换语句
提问于 2022-01-28 05:24:19
尝试自动增加我的开关语句的索引，这样我的站点就会自动切换出不同的元素。
试图通过以下方法实现这一目标：
export default function MainComponent(props) {
let index = 0;
switch (index) {
case 0:
counter++;
console.log(index)
return (
//ELEMENT 1
);
case 1:
index++;
console.log(index)
return (
//ELEMENT 2
);
case 2:
index++;
console.log(index)
return (
ELEMENT 3
);
case 3:
index++;
console.log(index)
return (
//ELEMENT 4
);
default:
return (
null
)我可以看到索引在控制台中增加，所以我不明白为什么我的开关状态没有切换到下一个元素。
感谢你的任何帮助
回答 1
Stack Overflow用户
发布于 2022-01-28 05:35:47
如果我对你的理解正确，你需要用钩子作为状态。否则，React不会改变组件的质量。
import { useCallback, useState } from "react";
export default function App() {
let [index, setIndex] = useState(0)
let increment = useCallback(() => {
setIndex(index => index + 1);
}, [setIndex])
switch (index) {
case 0:
increment()
console.log(index)
return 1
case 1:
increment()
console.log(index)
return 2
case 2:
increment()
console.log(index)
return 3
case 3:
increment()
console.log(index)
return 4
default:
return 'default'
}
}但很快就会发生。您需要一些超时时间才能在屏幕上看到不同的情况。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70894495
复制相关文章
腾讯云开发者
