让 useEffect 监视一个条件，并让它只触发一次

Question

React的useEffect如下所示：

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

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

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

到目前为止，我能想到的最好的方法是将监视的表达式编码为布尔值。然后触发该效果两次，一次是当布尔值从 false 翻转为真时，第二次是当它翻转回 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>
);
}

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