让useEffect监视条件并使其仅触发一次

Posted 2021-03-19

反应的useEffect看起来像这样：

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

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

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

到目前为止，我能想到的最好的办法是将观察到的表达式编码为布尔值。然后触发该效果两次，一次是布尔值从false变为true，另一次是布尔值返回false。这曾经太多了。这是一个小例子：

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

答案

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

 import React, {useState, useEffect} from "react";
    import "./styles.css";

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