让 useEffect 观察一个条件并让它只触发一次

Question

React 的useEffect看起来像这样：

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

其中input是在更改时触发效果的值列表。

假设我在看一个数字，我只想在数字达到10时触发效果。可以这样做吗？

到目前为止，我能想到的最好的方法是将观察到的表达式编码为 boolean 值。 然后会触发两次效果，一次是在 boolean 从假翻转为真时，第二次是在它翻转回假时。 这一次太多了。
这是一个小例子：

export default function App() {
  const [num, setNum] = useState(0);
  const hit10 = num === 10;
  useEffect(() => {
    console.log("resetting");
    setNum(0);
  }, [hit10]);

  return (
    <button
      onClick={() => {
        setNum(num + 1);
      }}
    >
      {num}
    </button>
  );
}

Answer 1

您不需要使用其他变量，如hit10 ，您只需在useEffect()挂钩中放置一个条件，以在每次呈现组件时检查数字的值。

 import React, {useState, useEffect} from "react";

    export default function App() {
      const [num, setNum] = useState(0);

      useEffect(() => {
        if(num === 10) {
          console.log("resetting");
          setNum(0);
        }
      }, [num]);

      return (
        <button
          onClick={() => {
            setNum(num + 1);
          }}
        >
          {num}
        </button>
      );
    }