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

Question

因此，无论何时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，代码将按照我想要的方式工作，但是我得到了预期的详尽下降警告，这可能不是最佳解决方案。

当前，将导致无限循环。

我不能将run（）移到useEffect回调中，因为我还需要能够从组件的其他位置调用run（）。

如果我愿意

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

设置b为依赖项会导致无限循环。

每次run()更改时，我如何一次致电a？

不胜感激！

Answer 1

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