在反应时每隔1秒更改图像

Question

我想每隔一秒钟将一个图像更改为另一个图像。理想情况下，我想添加一些与之前略有变化的图像，这些图像一个接一个地变化。我创建了一个可变状态和一个区间函数，感觉自己走在了正确的道路上。显然，我在图像源中插入的内容是不正确的，我也不确定将间隔计时器(如1000(放在哪里。任何帮助都将不胜感激，这是我迄今为止的代码。

import "./about.css";
import tb3 from "../../img/tb3.png";
import tb from "../../img/tb.png";
const state = { imageList: [{ tb3, tb }], chosenImgIndex: 0 };
setInterval(() => {
if (state.chosenImgIndex < state.imageList.length - 1) {
state.chosenImgIndex++;
} else {
state.chosenImgIndex = 0;
}
});
const About = () => {
return (
<div className="a">
<div className="a-left">
<div className="a-card bg"></div>
<div className="a-card">
<img
src={state.imageList[state.chosenImgIndex]}
alt=""
className="a-img"
/>
</div>
</div>
<div className="a-right">
<h1 className="a-title">About Me</h1>
<p className="a-sub">
lorem ipsum
</p>
<p className="a-description">
<b>How do I stay motivated?</b> Lorem ipsum
</p>
<p className="a-description">
<b>How do I relax?</b> Lorem Ipsum

</p>
</div>
</div>
);
};
export default About;

Answer 1

setInterval((Documentation是您的朋友。

来自文件：

var intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');
function myCallback(a, b)
{
// Your code here
// Parameters are purely optional.
console.log(a);
console.log(b);
}

所以在你的情况下，你会做一些类似的事情：

setInterval(() => {
if (state.chosenImgIndex < state.imageList.length - 1) {
state.chosenImgIndex++;
} else {
state.chosenImgIndex = 0;
}
}, 1000);