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

【问题标题】：let useEffect watch a condition and have it trigger only once让 useEffect 观察一个条件并让它只触发一次
【发布时间】：2020-06-05 10:01:56
【问题描述】：

React 的 useEffect 看起来像这样：

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

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

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

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

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会运行，你需要像hit10 && setNum(0)一样在useEffect中通过检查。
查看stackoverflow.com/questions/57620799/…

标签： javascript reactjs react-hooks react-state-management

【解决方案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>
      );
    }

【讨论】：