react hook useEffect无限循环，尽管依赖项列表

Question

我一直试图了解钩子，特别是useEffect及其依赖项列表，但出于某种原因，下面的代码一直在无休止地运行。我发现了这个非常相关的问题，但没有能够按照那里的建议使我的代码工作。下面是错误代码，您可能必须启用浏览器控制台才能看到循环。

// a fake fetch for the sake of the example
function my_fetch(f, delay) {
  setTimeout(f, delay)
}

// if account is not loaded then useEffect should not fetch the balance
function useFetchBalance(account_id, account_loaded) {

  const [balance, setBalance] = useState(null)

  useEffect(() => {
    if (!account_loaded) return; // only fetch if dependency is resolved
    my_fetch(() => setBalance(41 + account_id), 3000)
  }, [account_id, account_loaded])

  return balance
}


function App() {

  const [account, setAccount] = useState({ id: null, loaded: false })
  my_fetch(() => setAccount({ id: 1, loaded: true }), 3000)

  const balance = useFetchBalance(account.id, account.loaded)
  console.log(balance)

  return null
}

实际上，我有一个状态(account)，它使用fetch（在本例中是假的）进行更新。当尚未提取帐户时，account.loaded被设置为false。这确保了在调用usefetchbalance时，它不会获取余额。我希望控制台最初记录一个null值，6秒后（3用于获取帐户，3用于获取余额）记录42。然而，它首先打印null 3次，然后以似乎是两批的方式无休止地打印42次。我是非常新的反应，所以任何帮助都将非常感谢。

Answer 1

您在app中的my_fetch组件在每次重新呈现时都会触发，在app挂载时使用useeffect调用一次，这将确保my_fetch组件挂载时只运行一次，而不是在每次重新呈现时运行一次

不要忘记React函数组件毕竟是函数，所以在每次重新呈现时都会执行函数，这就是为什么我们需要使用React提供的帮助函数

function App() {
  const [account, setAccount] = useState({ id: null, loaded: false })
  const balance = useFetchBalance(account.id, account.loaded)

  useEffect(() => {
    my_fetch(() => setAccount({ id: 1, loaded: true }), 3000)
  }, [])

  return null
}