javascript - 多次触发使用效果

Question

我正在尝试在带有计数器的按钮上执行简单的 setState，并根据其状态应用不同的背景颜色。它在前 3 次按钮单击时完美运行，在第四次按钮单击时运行良好，依此类推：计数器日志

这是代码：

useEffect(() => {
    const changePower = () => {
      if (power === 'on') {
        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(count);
  }, [power])

任何帮助都会很棒，谢谢！

标签： javascriptreactjsuse-effectuse-state

Answer 1

如果在 useEffect 中设置 Power，它会自行触发。

useEffect(() => {
   if(count%2)
      document.getElementById('btn-trigger').style.backgroundColor = "red";
   else
      document.getElementById('btn-trigger').style.backgroundColor = "lime";
   }, [count])

const handeClick = () => {
  setCount(count + 1);
}