使用多次触发的效果

Question

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

代码如下：

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])

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

Answer 1

您正在通过 useEffect 中的“setPower”设置“power”值，该 useEffect 正在监听“power”的变化。

Answer 2

您需要清理事件：

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);

    return () => window.removeEventListener("click", changePower) <-----
  }, [power])

此外：changePower 函数应该在 useEffect 钩子之外声明。您在这里使用 useCallback 挂钩。

Answer 3

每次更改 power 时都会添加一个新的事件侦听器，而不会删除之前的侦听器。所以第一次点击调用一个处理程序，第二次调用两个，第三次调用三个，依此类推

在 React 组件中使用 addEventListener 通常是（虽然不总是）一种反模式。相反，通过 React 道具连接处理程序。同样，您将以相同的方式更改背景颜色。这也消除了对 useEffect:

的需要

const {useState} = React;

const Example = () => {
    const [power, setPower] = useState("off"); // Note: I'd use a boolean, not strings

    const changePower = () => {
        setPower(p => p === "off" ? "on" : "off");
    };

    return <span className={`power ${power}`} onClick={changePower}>power</span>;
};

ReactDOM.render(<Example/>, document.getElementById("root"));

.power {
    cursor: pointer;
}
.on {
    background-color: lime;
    color: black;
}
.off {
    background-color: red;
    color: white;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

但如果您真的需要使用外部元素，return来自useEffect的清理回调以删除先前的事件处理程序。我可能还会在一个地方而不是多个地方查找元素：

useEffect(() => {
    const trigger = document.getElementById('btn-trigger'); // ***
    const changePower = () => {
        if (power === 'on') {
            trigger.style.backgroundColor = "red";
            setPower('off');
        } else if (power==='off') {
            trigger.style.backgroundColor = "lime";
            setPower('on');
        }
        setCount(count + 1);
    }

    trigger.addEventListener('click', changePower);
    console.log(count);
    // ***vvv
    return () => {
        trigger.removeEventListener('click', changePower);
    };
    // ***^^^
}, [power]);

Answer 4

如果你在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);
}

使用多次触发的效果

Use Effect Triggered Multiple Times

javascript

reactjs

use-effect

use-state