时间戳

首页 > 解决方案 > 在这种情况下，如何使用 useEffect 避免无限循环？（反应）

reactjs - 在这种情况下，如何使用 useEffect 避免无限循环？（反应）

问题描述

所以我想在（在组件的状态下）改变run()时调用。a

run()设置另一个状态变量 b 的值。

  import {computeWithB} from '../helpers/compute'

  const [a, setA] = useState()
  const [b, setB] = useState()

  const run = () => {
    result = computeWithB(b)
    setB(result)
  }

  useEffect(() => {
    run();
  }, [a, run]);

如果我run从依赖项数组中删除，代码会按照我想要的方式工作，但我会收到预期的详尽-deps 警告，这可能不是最好的解决方案。

目前，导致无限循环。

我无法将 run() 移动到 useEffect 回调中，因为我还需要能够从组件的其他位置调用 run()。

如果我做

const run = useCallback(() => {
  result = computeWithB(b)
    setB(result)
}, [b]);

b当它是一个依赖项时，设置会导致无限循环。

run()每次更改时如何调用一次a？

将不胜感激任何建议！

标签： reactjsreact-hooksuse-effect

解决方案

useEffect 中的 run 函数设置触发重新渲染的状态。现在，由于重新渲染会导致创建新的 run 函数引用，并且 run 被用作 useEffect 的依赖项，因此再次调用 useEffect，导致无限循环

您可以将 useCallback 用于 run 函数，以避免在每次渲染时都有新的引用，并使用其中的功能状态更新，例如

 import {computeWithB} from '../helpers/compute'

  const [a, setA] = useState()
  const [b, setB] = useState()

  const run = useCallback(() => {
    setB(prevB => computeWithB(prevB))
  }, [setB])

  useEffect(() => {
    run();
  }, [a, run]);

推荐阅读