在if-else语句中使用useState更改状态时出现问题

Question

我在useState和"如果其他"；陈述我想通过单击更改显示的文本。当我检查计数器icrement是否工作时，它工作，但当我在"中添加setText时；如果其他"；声明存在问题，无法正常工作。当点击并更改文本时，Icnrement策略会奇怪地工作，这是不可能的。即使在控制台中，增量看起来也是错误的。有人能帮我做错事吗？

let counter = 0;
const [txt, setTxt] = useState("Text1");

const handleClick = (e) => {
if (
e.target.classList.contains("fa-angle-right") || e.target.classList.contains("fa-angle-left")
) {e.target.classList.contains("fa-angle-right") ? counter++ : counter--;

if (counter === 1) {
console.log(counter);
setTxt("Text2");
} else if (counter === 2) {
console.log(counter);
setTxt("Txt3")
} else if (counter > 2) {
counter = 0;
console.log(counter);
setTxt("Text1");
} else if (counter < 0) {
counter = 2;
console.log(counter);
setTxt("Text3");
} else if (counter === 0) {
console.log(counter);
setTxt("Txt1");
}
}
};

Answer 1

每次执行setTxt('...')时，都会重新渲染组件，并再次执行函数，因此counter的值为0。如果您想在渲染之间保留计数器的值，请将其作为新状态(const[counter，setCounter]=useState(0((

Answer 2

好吧，@AdriánFernándezMartínez我就是这么做的，一切都结束了。就在第一次clik之后；如果"；(如果(counter==1((控制台显示0，我必须单击两次才能更改它并更改Txt(但在setCounter(counter+1(之后应该是1(。接下来，在第三个"；如果"；(否则，如果(counter>2((控制台显示3，我需要再次单击两次以更改Txt(在第一次单击后为0，在第二次单击后变为1(。仍然需要帮助。

const [counter, setCounter] = useState(0);
const [txt, setTxt] = useState("Text1");
const handleClick = (e) => {
if (
e.target.classList.contains("fa-angle-right") ||
e.target.classList.contains("fa-angle-left")
) {
e.target.classList.contains("fa-angle-right")
? setCounter(counter + 1)
: setCounter(counter + 1);
console.log(counter);
if (counter === 1) {
console.log(counter);
setTxt("Text2");
} else if (counter === 2) {
console.log(counter);
setTxt("Text3");
} else if (counter > 2) {
setCounter(0);
console.log(counter);
setTxt("Text1");
} else if (counter < 0) {
setCounter(2);
console.log(counter);
setTxt("Text3");
} else if (counter === 0) {
console.log(counter);
setTxt("Text1");
}
}

};