Question

function Example() {
  const [stateA, stateA] = useState(0);
  const [stateB, stateB] = useState(0);

  useEffect(() => {
    // this calculation should only be trigged by the change of stateA
    // but it somehow uses the stateB for calculation

    const calculation = () => {
      console.log(stateB);
    };
    calculation();
  }, [stateA]);

  return null;
}

根据https://overreacted.io/a-complete-guide-to-useeffect/的指南，我想知道在这种情况下设置依赖项的正确方法是什么

Answer 1

如果您正在组件中使用计算结果，这听起来像是useCallback hook的一个好用例。

const someResult = useCallback(() => {
  return doSomething(stateB);
}, [stateA])

如果您只想运行一些随机效果，那么useEffect是正确的。您只需要在依赖项数组中指定stateA。

useEffect(() => {
  doSomething(stateB);
}, [stateA])

如果您使用exhaustive-deps掉毛规则，则在两种情况下都会发出警告。这是因为您记忆的计算依赖于stateB，但是在stateB更新时不会重新计算，这意味着您的计算可能是过时的。您有两种选择：

将stateB添加到依赖项数组中（您的计算将在更新stateA或stateB时进行。
忽略掉毛规则。您可以通过将此注释放在依赖项数组之前的行上来隐藏警告：// eslint-disable-next-line react-hooks/exhaustive-deps

传统的智慧是，抑制此警告会再次咬住您，因此可能值得一试的是，如果不进行这种过时的计算，是否可以完成所需的工作。

当状态A的变化应触发使用状态B的计算时，如何设置useEffect依赖项

1 个答案: