Use effect运行在依赖条件[count == 2]的下一个值检查上

Question

如下代码所示，使用effect日志记录count的0、2和3个值． 所以零被理解为在组件初始渲染时运行但是它应该只在count时运行值为2，但之后也运行为3。

useEffect(() => {
console.warn(count);
}, [count == 2]);

演示:https://codesandbox.io/p/sandbox/unruffled-kepler-o0ehc6?file=README.md

Answer 1

每次依赖项更改时效果都会运行。因此，从0到2，我们从false移动到true，从2到3，我们从true移动到false，因此它也运行在3上。

因此，只需在效果本身上添加条件。

useEffect(() => {
if (count !== 2) {
return;
}

console.warn(count);
}, [count]);

每次count变化时效果都会运行，但是您只能根据其值执行操作。

Answer 2

你的useEffect每次运行的原因，即使你传递[count == 2]作为依赖数组是因为表达式count == 2计算为布尔值(true或false)。

在React中，依赖数组应该只包含效果依赖的值。当这个效果被触发时，React会将依赖数组中的每个值与之前的值进行比较。如果任何值发生了变化，效果将重新运行。然而，在您的情况下，您传递的是一个布尔值(true或false)而不是count的值，这不是您想要的。

如果要在计数器等于2时才有条件地运行useEffect钩子，可以将该计数器包含在useEffect钩子的依赖数组中。这样，只要计数器的值发生变化，useEffect钩子就会运行。

下面是演示这一点的示例代码片段:

import { useState, useEffect } from 'react';
function MyComponent() {
const [counter, setCounter] = useState(0);
useEffect(() => {
if (counter === 2) {
// do something when counter is equal to 2
}
}, [counter]);
const incrementCounter = () => {
setCounter(counter + 1);
};
return (
<div>
<p>Counter: {counter}</p>
<button onClick={incrementCounter}>Increment counter</button>
</div>
);
}