Блог

Мне действительно нужна помощь в этом вопросе. Я пытался исследовать это в течение целого дня, но, похоже, у меня ничего не получается.

Итак, в основном у меня есть компонент, который должен отображать данные на основе заданных секунд в функции setInterval. Таким образом, секунды задержки будут динамическими в зависимости от того, что устанавливает пользователь (я называю это частотой обновления). Используя useEffect, я извлекаю указанную частоту обновления с помощью api, визуализирую api с помощью useEffect hook и сохраняю res.data в состояние

   const [refreshRate, getRefreshRate] = useState(0);

  useEffect(_ => {
    axios
    .get("/api/.../refreshRate")
    .then(res => {
         getRefreshRate(res.data)
       })
    .catch((err) => console.log(err));

  },[])
 

Затем мне нужно установить, что частота обновления равна секундам задержки для функции setInterval, которая будет использоваться для продолжения рендеринга данных на основе частоты обновления, установленной пользователем.

 const [refreshRate, getRefreshRate] = useState(0); // the refresh rate
const [data, getData] = useState([]); // The data that needs to re-render depending in the refreshRate State

useEffect(_ => {
 axios
    .get("/api/.../refreshRate")
    .then(res => {
         getRefreshRate(res.data)
       })
    .catch((err) => console.log(err));

},[])

useEffect(_ => {
   const interval = setInterval(_ => {
       axios
        .get("/api/.../getData")
        .then(res => {
             getData(res.data)
           })
        .catch((err) => console.log(err));
},refreshRate)

   return _ => {
    clearInterval(interval)
}
  },[])
 

Но в результате это приводит к бесконечному циклу в приложении. Я также пытался использовать Redux, с той же логикой я сохраняю частоту обновления в глобальном состоянии, пытался установить ее в секундах задержки функции setInterval, но все равно вызывает бесконечный цикл. Есть ли какой-нибудь способ исправить или улучшить это?