如何编写依赖于反应查询调用的自定义钩子

Question

我有几个钩子，它们使用 react query 获取数据并对该数据进行低级计算。另一个自定义钩子将使用该数据的输出来计算不同的值。

例如：

• Hook #1 获取用户出租物业(例如炉子、屋顶等)的未来费用列表。
• Hook #2 获取用户的偏好，未来应该考虑和保存多长时间的费用(例如，只有未来 5 年内到期的费用是相关的)。
• Hook #3 调用 hook #1 和 #2，并返回每月应留出的总金额以支付未来的费用。

由于钩子 #3 依赖于前两个钩子中的数据，所以我不确定如何构建该代码。React 查询返回数据和加载状态，所以我目前正在合并钩子 #1 和 #2 的加载状态，并将钩子 #3 中的数据计算放在一个条件中。但这会导致重新渲染循环错误。

知道为什么会这样吗？

const usePropertyTotalMonthlyCapex = (propertyId) => {
const [preferences, preferencesIsLoading, preferencesIsError, preferencesError] = useGetUserPreferences()
const [expenses, isLoading, isError, error] = useGetExpenses(propertyId)
const [capex, setCapex] = useState(0)
if (preferences && expenses) { // this seems to be causing a render loop error
if (expenses.length === 0) {
setCapex(0)
} else {
const { outlookLength } = preferences
const expenseValues = expenses?.map(expense => {
const { lifespan, age, replacementCost } = expense
if (lifespan - age > outlookLength) {
return 0
}
return replacementCost / ((lifespan - age) * 12)
})
setCapex(expenseValues.reduce((acc, init) => acc + init).toFixed(0))
}
}
return [capex, preferencesIsLoading && isLoading]

Answer 1

你不需要状态。capex派生状态，可以从已有的状态计算出来。将派生状态放入状态可能是一种反模式。如果仅在效果中调用useState的设置器，则可以发现它。由于计算capex是纯的，因此您可以在渲染期间调用它：

const computeCapex = (preferences, expenses) => {
if (preferences && expenses) {
if (expenses.length === 0) {
return 0
} else {
const { outlookLength } = preferences
const expenseValues = expenses?.map(expense => {
const { lifespan, age, replacementCost } = expense
if (lifespan - age > outlookLength) {
return 0
}
return replacementCost / ((lifespan - age) * 12)
})
return expenseValues.reduce((acc, init) => acc + init).toFixed(0))
}
}
}
const usePropertyTotalMonthlyCapex = (propertyId) => {
const [preferences, preferencesIsLoading, preferencesIsError, preferencesError] = useGetUserPreferences()
const [expenses, isLoading, isError, error] = useGetExpenses(propertyId)
const capex = computeCapex(preferences, expenses)
return [capex, preferencesIsLoading && isLoading]
}

如果计算成本很高，您可以将调用包装在useMemo中，这是为此而做的：

const usePropertyTotalMonthlyCapex = (propertyId) => {
const [preferences, preferencesIsLoading, preferencesIsError, preferencesError] = useGetUserPreferences()
const [expenses, isLoading, isError, error] = useGetExpenses(propertyId)
const capex = React.useMemo(
() => computeCapex(preferences, expenses),
[preferences, expenses]
)
return [capex, preferencesIsLoading && isLoading]
}

Answer 2

函数组件和钩子定义必须是没有副作用的纯函数;它们不能直接设置状态。 相反，您需要将代码的计算逻辑包装在useEffect或useLayoutEffect中(取决于您是希望它在渲染之后还是之前触发);请参阅效果钩。 例如：

const usePropertyTotalMonthlyCapex = (propertyId) => {
const [preferences, preferencesIsLoading, preferencesIsError, preferencesError] = useGetUserPreferences()
const [expenses, isLoading, isError, error] = useGetExpenses(propertyId)
const [capex, setCapex] = useState(0)
useLayoutEffect(() => {
if (preferences && expenses) {
if (expenses.length === 0) {
setCapex(0)
} else {
const { outlookLength } = preferences
const expenseValues = expenses?.map(expense => {
const { lifespan, age, replacementCost } = expense
if (lifespan - age > outlookLength) {
return 0
}
return replacementCost / ((lifespan - age) * 12)
})
setCapex(expenseValues.reduce((acc, init) => acc + init).toFixed(0))
}
}
}, [preferences, expenses])
return [capex, preferencesIsLoading && isLoading]
}