Делаю для приложение перемотки слайдов, возникла проблема, что при установке значения хука, значение не меняется.
import React from 'react';
function Slides({slides}) {
const [index, setIndex] = React.useState(0);
const [slide, setSlide] = React.useState(slides[0]);
const [disabledButtonRestartAndPrev, SetDisabledButtonRestartAndPrev] = React.useState(true);
const [disabledButtonNext, setDisabledButtonNext] = React.useState(false);
const onCLickNext = () => {
setIndex(index + 1);
chekEnabled();
setSlide(slides[index]);
}
const onCLickPrev = () => {
setIndex(index - 1);
chekEnabled();
setSlide(slides[index]);
}
const onCLickRestart = () => {
setIndex(0);
setSlide(slides[0]);
SetDisabledButtonRestartAndPrev(true);
setDisabledButtonNext(false);
}
const chekEnabled = () => {
index === slides.length - 1 ? setDisabledButtonNext(true) : setDisabledButtonNext(false);
index > 0 ? SetDisabledButtonRestartAndPrev(false) : SetDisabledButtonRestartAndPrev(true)
}
return (
<div>
<div id="navigation" className="text-center">
<button onClick={onCLickRestart} disabled={disabledButtonRestart} data-testid="button-restart"
className="small outlined">Restart
</button>
<button onClick={onCLickPrev} disabled={disabledButtonPrevious} data-testid="button-prev"
className="small">Prev
</button>
<button onClick={onCLickNext} disabled={disabledButtonNext} data-testid="button-next"
className="small">Next
</button>
</div>
<div id="slide" className="card text-center">
<h1 data-testid="title">{slide.title}</h1>
<p data-testid="text">{slide.text}</p>
</div>
</div>
);
}
export default Slides;
При отладке в браузере при первом нажати на кнопку "Next" index
так и остается = 0, при повторном нажатии уже 1, и тд. Подскажите в чем проблема?