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

我一直在努力了解钩子，特别是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
}

---

本质上，我有一个状态（

帐户

），它是使用fetch更新的（在本例中为false）。尚未提取帐户时，

account.loaded

设置为false。这可确保在调用

useFetchBalance

时不会提取余额。我希望控制台最初记录一个空值，6秒后（3秒用于获取帐户，3秒用于获取余额）记录42。然而，它首先打印空值3次，然后在两个批次中无休止地打印42次。我是一个新的反应，所以任何帮助将不胜感激

您的

my_fetch

在

App

中的组件在每次重新渲染时都会持续启动，当

App

使用

useffect

和空依赖项数组装载时调用它一次，这将确保

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
}

---

除非您只运行过一次（即空数组作为依赖项），否则很容易在不经意间生成调用fetch in

useffect

的无限循环。别难过，IMHO

useffect

确实是所有React中最容易出错的API。别忘了，您总是可以使用生命周期方法编写类组件，您不必使用钩子（尽管其他钩子都很棒）。