反应钩子(使用效果)无限循环澄清

Question

这个问题与我之前的问题有关。我写了两个自定义钩子。第一个是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
}

在其中执行 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 有关，即使account_ids不更改值，这似乎一直在触发useFetchBalanceWithIDs。有人可以帮助解释这种行为吗？我可以使用useFetchBalanceWithAccounts但我想了解为什么useFetchBalanceWithIDs不起作用。谢谢！

Answer 1

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

Answer 2

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

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

防止来自 id 的数组更改引用的一种方法是在应用程序中将 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;
}