Reactjs 反应设置间隔以更改引号

我想设置一个间隔，每次只显示一个报价，每5秒更改一次。有一个简单的方法可以做到这一点吗

我正在使用Gatsby和Wordpress，用graphQL查询acf字段：

从“React”导入React
从“gatsby”导入{useStaticQuery，graphql}
从“../../images/tango\u citat.svg”导入citatimg
从“./styles/CitatStyles”导入{CitatWrapper}
const-Citat=（）=>{
常量数据=useStaticQuery（graphql`
质疑{
wordpressPage（wordpress_id:{eq:47}）{
活性炭纤维{
citat_1_文本
citat_1_作者
citat_2_文本
citat_2_作者
}
}
} 
`)
返回(
//引用一个
{data.wordpressPage.acf.citat_1_text}
{data.wordpressPage.acf.citat_1_author}
//引文2
{data.wordpressPage.acf.citat_2_text}
{data.wordpressPage.acf.citat_2_author}
)
}
导出默认Citat

下面是一个示例，说明如何将

setInterval

与

useState

和

useffect

挂钩一起使用，一次迭代一个选项数组（到达末尾后返回开始）

import React，{useState，useffect}来自“React”
从“gatsby”导入{useStaticQuery，graphql}
从“../../images/tango\u citat.svg”导入citatimg
从“./styles/CitatStyles”导入{CitatWrapper}
const-Citat=（）=>{
//分解“acf”字段以便于参考
const{wordpressPage:{acf}}=useStaticQuery（graphql`
质疑{
wordpressPage（wordpress_id:{eq:47}）{
活性炭纤维{
citat_1_文本
citat_1_作者
citat_2_文本
citat_2_作者
}
}
} 
`)
//以更正式/可用的格式构建数据
常量引号=[
{text:acf.citat_1_text，作者：citat_1_author}，
{text:acf.citat_2_text，作者：citat_2_author}，
]
常量[activeIndex，setActiveIndex]=useState（0）
useffect（（）=>{
//每5000ms（5s）
const timer=window.setInterval（（）=>{
//`prev`将是状态的当前值；使用
//这里的回调意味着我们避免使用useffect钩子
//正在对每个状态更新进行评估，该更新将
//对性能不利。
setActiveIndex（上一个=>
//如果我们到了终点，从头再来，
//否则，增加索引
prev+1>=quotes.length？0:prev+1
)
}, 5000)
//我们返回一个清除回调，该回调将停止计时器
return（）=>{
窗口清除间隔（计时器）
}
}，[引用]）
//在此处设置activeQuote以避免重复逻辑和
//为了弄清楚下面呈现的是什么
const activeQuote=quotes[activeIndex]
返回(
{activeQuote.text}
{activeQuote.author}
)
}
导出默认Citat

我的解决方案：

const handlePrevClick=（）=>{
setActiveIndex（上一个=>
//如果我们在开始，走到最后，
//否则，减小索引
prev==0？2:prev-1
)
}

这是否回答了您的问题？嗨@coreyward！！我正在尝试实现一个透水按钮。这是我使用的逻辑：`consthandleprevclick=（）=>{setActiveIndex（prev=>prev==！0？prev-1:prev+1）}`但它工作得并不完美。你能帮我吗？

prev==！0

的计算结果为

prev==true

，其计算结果为

true

任何时候

prev

均为非零。Hi@coreyward！！你能帮我吗？[连结]