3

这个问题与我之前的问题有关。我写了两个自定义钩子。第一个是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为假，它将不会执行提取。我一起使用它们如下：

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
}

它在其中执行 ids 提取。我这样使用它：

function App() {

  const account_data = useFetchAccounts()

  const accounts = account_data.accounts

  const balance = useFetchBalanceWithAccounts(accounts, account_data.loaded)

  console.log(balance)

  return null
}

运行得很好。所以问题似乎与从 App 组件中提取 ID 有关，这似乎一直在触发useFetchBalanceWithIDs，即使account_ids不改变值。有人可以帮助解释这种行为吗？我可以使用useFetchBalanceWithAccounts，但我想了解为什么useFetchBalanceWithIDs不起作用。谢谢！

4

2 回答 2

2

问题是您正在使用 map 函数来获取您的帐户 ID 数组。React 使用 Object.is 来确定依赖数组中的值是否在每个渲染周期中都发生了变化。map 函数返回一个新数组，因此即使数组中的值相同，比较检查的计算结果为 false，并且运行效果。

于 2019-08-24T09:58:15.433 回答
1

引用相等由 使用useEffect，这意味着[1,2,3]不等于[1,2,3]

const data = [{id:1}];
data.map(d=>d.id)===data.map(d=>d.id);//is false

防止数组从 id 更改引用的一种方法是在 App 中将 useState 与 useEffect 结合使用：

function App() {
  //store account id's in app state
  const [accountIds, setAccountIds] = useState([]);
  const account_data = useFetchAccounts();
  const accounts = account_data.accounts;
  //only if accounts change re set the id's
  useEffect(() => {
    setAccountIds(accounts.map(a => a.id));
  }, [accounts]);
  const balance = useFetchBalanceWithAccounts(
    accountIds,
    account_data.loaded
  );
  console.log(balance);
  return null;
}
于 2019-08-24T10:08:10.773 回答