3

この質問は、私のこの前の質問に関連しています。2 つのカスタム フックを作成しました。1 つ目はuseFetchAccounts、ユーザー アカウントに関するデータを取得するジョブで、次のようになります。

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

function useFetchAccounts() {

  const [data, setData] = useState({accounts: [], loaded: false})

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

  return data
}

このフックについて特別なことはなく、アカウントの ID を取得するだけです。

useFetchBalancesWithIDs(account_ids, accounts_loaded)これで、アカウントが読み込まれている場合に、前のステップから ID を取得し、これらのアカウントの残高を取得するための別のフックが作成されました。次のようになります。

function useFetchBalanceWithIDs(account_ids, accounts_loaded) {

  const [balances, setBalances] = useState(null)

  useEffect(() => {
    if (!accounts_loaded) return; // only fetch if accounts are loaded
    my_fetch(() => {
      setBalances(account_ids.map(id => 42+id))
    }, 3000)
  }, [account_ids, accounts_loaded])

  return balances
}

accounts_loadedが false であることがわかるように、フェッチは実行されません。一緒に私は次のようにそれらを使用しています:

function App() {

  const account_data = useFetchAccounts()

  const accounts = account_data.accounts
  const account_ids = accounts.map(account => account.id) // extract ids

  const balance = useFetchBalanceWithIDs(account_ids, account_data.loaded)

  console.log(balance)

  return null
}

残念ながら、これにより無限ループが発生します。何が機能するかは、これを次のように変更するuseFetchBalancesWithIDsことです：

function useFetchBalanceWithAccounts(accounts, accounts_loaded) {

  const [balances, setBalances] = useState(null)

  useEffect(() => {
    if (!accounts_loaded) return; // only fetch if accounts are loaded
    my_fetch(() => {
      setBalances(accounts.map(account => 42+account.id))
    }, 3000)
  }, [accounts, accounts_loaded])

  return balances
}

その中でID抽出を実行します。私はこのように使用しています：

function App() {

  const account_data = useFetchAccounts()

  const accounts = account_data.accounts

  const balance = useFetchBalanceWithAccounts(accounts, account_data.loaded)

  console.log(balance)

  return null
}

これは問題なく動作します。useFetchBalanceWithIDsそのため、この問題は App コンポーネント内からの ID の抽出に関連しているように思われaccount_idsます。誰かがこの動作を説明するのを手伝ってくれますか? 使用しても問題ありませんがuseFetchBalanceWithAccounts、機能しない理由を理解したいと思いuseFetchBalanceWithIDsます。ありがとうございました！

4

2 に答える 2