Мой компонент использует перехватчик, который использует другой перехватчик, который, в свою очередь, использует другой перехватчик (назовем его hook1
).
hook1
выглядит так:
function useANTBalance(guardianId) {
const antTokenContract = useANTTokenContract();
const error = null
const [data, setData] = useState({ antbalance: { amount : bigNum(0) }});
useEffect(() => {
async function getData() {
const amount = await antTokenContract.balanceOf(guardianId)
setData({ antbalance: { amount : bigNum(amount) }} )
}
getData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return { data, error }
}
Каждые 10 секунд в интервале мой компонент перерисовывается, что означает, что используемый им хук вызывается снова, который, в свою очередь, снова вызывает hook1
. Таким образом, hook1
вызывается каждые 10 секунд.
При использовании useEffect
выше я выполняю асинхронный вызов для получения баланса. Проблема в том, что даже если приведенный выше balanceOf
возвращает другую сумму, useEffect
не вызывается, потому что у меня есть зависимость []
, которая не меняется.
если я удалю зависимость []
, то useEffect
будет вызываться так много раз, как будто он становится рекурсивным, и моя страница перестает отвечать.
Есть идеи, что я могу сделать? К сожалению, не разработчик реакции.
Другая ловушка, вызывающая hook1
, не зависит от какой-либо переменной, поэтому на данном этапе невозможно убедиться, что другая ловушка дает некоторую зависимость от hook1
. Что касается рефакторинга для getData
, я поместил его в useEffect
, чтобы я мог выполнять там асинхронный вызов. Не уверен, как вынести это на улицу поможет
Перехватчики useEffect
используются для выполнения действий после повторного рендеринга компонента ИЛИ изменения определенного свойства, что также вызывает повторный рендеринг. Поскольку ваша функция вызывает саму повторную визуализацию и не зависит от каких-либо других свойств, ловушка useEffect
не является подходящим местом для ее вызова. Вы хотите вызывать функцию каждые 10 секунд, поэтому я бы предложил определить ее вне ловушка и вызов ее из обратного вызова setInterval
, а не ловушка.
не могу выполнить setInterval, потому что я использую urql
, у которого есть useQuery
, который вызывает некоторые запросы каждые 10 секунд (я пропускаю 10-секундный вариант). Итак, использование setInterval
не может быть вариантом.
Ловушка без предоставленного массива зависимостей вызывается каждый раз при повторном рендеринге компонента. Поскольку ваш хук изменяет состояние, вызывая повторный рендеринг, это приводит к бесконечному циклу. Вы должны либо выбрать зависимость (возможно, обновленную другим хуком?), Которая запускает перехватчик, или рефакторинг
getData
для функции вне ловушки, и вызвать ее из обратного вызоваsetInterval
, что вы, вероятно, уже делаете в другой части вашего заявление.