具有 React useState 和 UseEffect 的自动滑块

Question

如何在不使用左右箭头的情况下使轮播自动滑动。左右方法已经工作。

这是我到目前为止的代码：

function Slider() {
let Arry = [
<img src="imgslide1.jpg" />,
<img src="imgslide2.jpg" />,
<img src="imgslide3.jpg" />
];
const [x, setX] = useState(0);
useEffect(() => {
setX === 0 ? -100 * Arry.lenght-- : Arry.lenght++;
setTimeout(x, 2000);
});
const goLeft = () => {
x === 0 ? setX(-100 * (Arry.length - 1)) : setX(x + 100);
console.log(x);
};
const goRight = () => {
x === -100 * (Arry.length - 1) ? setX(0) : setX(x - 100);
console.log(x);
};
}

Answer 1

您可以在挂载效果中使用 setInterval 并更改该函数中的状态。