我試圖對一個帶有計數器的按鈕做一個簡單的setState，并根據其狀態應用不同的背景顏色。它在前3次點擊按鈕時運行良好，在第四次點擊時，以此類推，它是這樣的。計數器日志
下面是代碼：
useEffect(() =>/span> {
const changePower = (/span>) => {
if (power === 'on'/span>) {
document.getElementById('btn-trigger') 。 style.backgroundColor = "red"。
setPower（'off'）。
} else if (power==='off') {
document.getElementById('btn-trigger') 。 style.backgroundColor = "lime"。
setPower（'on'）。
}
setCount（count 1）。
}
document.getElementById('btn-trigger') 。 addEventListener（'click', changePower）。
console.log（計數）。
}, [power])
任何幫助都將是巨大的，謝謝你！
uj5u.com熱心網友回復：
你正在通過useEffect里面的 "setPower "設定 "power "值，useEffect正在監聽 "power "的變化。
CodePudding
你需要清理事件：useEffect(() =>/span> {
const changePower = (/span>) => {
if (power === 'on'/span>) {
document.getElementById('btn-trigger') 。 style.backgroundColor = "red"。
setPower（'off'）。
} else if (power==='off') {
document.getElementById('btn-trigger') 。 style.backgroundColor = "lime"。
setPower（'on'）。
}
setCount（count 1）。
}
document.getElementById('btn-trigger') 。 addEventListener（'click', changePower）。
console.log（計數）。
return () => window。 removeEventListener("click"/span>, changePower) <-----
}, [power])
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/306983.html
標籤：
下一篇：在reactnative中無法從https://jcenter.bintray.com/org/webkit/android-jsc/maven-metadata.xml問題加載Maven元資料