Как снова вызвать React useEffect

Мой компонент использует перехватчик, который использует другой перехватчик, который, в свою очередь, использует другой перехватчик (назовем его 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 будет вызываться так много раз, как будто он становится рекурсивным, и моя страница перестает отвечать.

Есть идеи, что я могу сделать? К сожалению, не разработчик реакции.

Ловушка без предоставленного массива зависимостей вызывается каждый раз при повторном рендеринге компонента. Поскольку ваш хук изменяет состояние, вызывая повторный рендеринг, это приводит к бесконечному циклу. Вы должны либо выбрать зависимость (возможно, обновленную другим хуком?), Которая запускает перехватчик, или рефакторинг getData для функции вне ловушки, и вызвать ее из обратного вызова setInterval, что вы, вероятно, уже делаете в другой части вашего заявление.

aside 30.03.2021 12:59

Другая ловушка, вызывающая hook1, не зависит от какой-либо переменной, поэтому на данном этапе невозможно убедиться, что другая ловушка дает некоторую зависимость от hook1. Что касается рефакторинга для getData, я поместил его в useEffect, чтобы я мог выполнять там асинхронный вызов. Не уверен, как вынести это на улицу поможет

Nika Kurashvili 30.03.2021 13:05

Перехватчики useEffect используются для выполнения действий после повторного рендеринга компонента ИЛИ изменения определенного свойства, что также вызывает повторный рендеринг. Поскольку ваша функция вызывает саму повторную визуализацию и не зависит от каких-либо других свойств, ловушка useEffect не является подходящим местом для ее вызова. Вы хотите вызывать функцию каждые 10 секунд, поэтому я бы предложил определить ее вне ловушка и вызов ее из обратного вызова setInterval, а не ловушка.

aside 30.03.2021 13:11

не могу выполнить setInterval, потому что я использую urql, у которого есть useQuery, который вызывает некоторые запросы каждые 10 секунд (я пропускаю 10-секундный вариант). Итак, использование setInterval не может быть вариантом.

Nika Kurashvili 30.03.2021 13:15
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
29
0

Другие вопросы по теме