Опрос (Polling) - это техника обновления данных в приложении, при которой приложение периодически отправляет запрос на сервер для получения новых данных. Это может быть полезно, когда данные в приложении могут часто изменяться и требуется отображать их в режиме реального времени.

В React опрос можно реализовать с использованием setInterval(), который будет запускать функцию-обработчик каждый определенный интервал времени. В данном случае функция-обработчик будет отправлять запрос на сервер для получения новых данных и обновлять состояние компонента при получении ответа.

Пример реализации опроса (Polling) в React:

import React, { useState, useEffect } from "react"
import axios from "axios"
 
function Polling() {
  const [data, setData] = useState([])
 
  useEffect(() => {
    const interval = setInterval(() => {
      axios
        .get("/api/data")
        .then((response) => setData(response.data))
        .catch((error) => console.log(error))
    }, 5000) // Опрос каждые 5 секунд
 
    return () => clearInterval(interval)
  }, [])
 
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <p>{item.name}</p>
          <p>{item.value}</p>
        </div>
      ))}
    </div>
  )
}
 
export default Polling

В данном примере мы используем хук useEffect() для запуска опроса при монтировании компонента и остановки опроса при размонтировании компонента. Функция setInterval() запускает опрос каждые 5 секунд и отправляет запрос на сервер при помощи библиотеки axios. После получения ответа мы обновляем состояние компонента при помощи функции setData(). Возвращаемое значение компонента - список данных, полученных с сервера, отображаемый в элементах <div>.

Назад