Вызов API Каждый X секунд в React функциональный компонент

голоса
0

У меня есть следующий класс реагируют компонент для вызова API каждые 10 секунд. Его работа без проблем.

class Alerts extends Component {
  constructor() {
    this.state = {
      alerts: {},
    }
  }

  componentDidMount() {
    this.getAlerts()
    this.timerId = setInterval(() => this.getAlerts(), 10000)
  }

  componentWillUnmount() {
    clearInterval(this.timerId)
  }

  getAlerts() {
    fetch(this.getEndpoint('api/alerts/all))
        .then(result => result.json())
        .then(result => this.setState({ alerts: result }))
  }

  render() {
    return (
      <>
        <ListAlerts alerts={this.state.alerts} />
      </>
    )
  }
}

Я пытаюсь тайным это к реакции функционального компонента. Это моя попытка до сих пор.

const Alerts = () => {

    const [alerts, setAlerts] = useState([])

    useEffect(() => {
        getAlerts()
        setInterval(() => getAlerts(), 10000)
    }, [])

    getAlerts() {
        fetch(this.getEndpoint('api/alerts/all))
            .then(result => result.json())
            .then(result => setAlerts(result)
    }

    return (
      <>
        <ListAlerts alerts={alerts} />
      </>
    )
}

Пожалуйста, может кто-то помочь мне закончить пример? Является ли useEffect правильного использования или есть лучший вариант?

Любая помощь будет оценена

Задан 02/12/2019 в 23:55
источник пользователем
На других языках...                            


1 ответов

голоса
2

Одна проблема здесь в том , что this.getEndpointне будет работать с функцией компонента. Кажется , оригинальный Alertsкомпонент класса отсутствует какой - то код , так что должны быть реализованы где - то.

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

И, наконец , нет никаких оснований для повторного определения getAlertsна каждом рендер, определив его , как только внутри тела эффект будет лучше.

После очистки некоторых недостающих скобок и т.д. моя последняя реализация будет выглядеть примерно так:

function getEndpoint(path) {
   return ...; // finish implementing this
}


const Alerts = () => {

    const [alerts, setAlerts] = useState([])

    useEffect(() => {
        function getAlerts() {
          fetch(getEndpoint('api/alerts/all'))
            .then(result => result.json())
            .then(result => setAlerts(result))
        }
        getAlerts()
        const interval = setInterval(() => getAlerts(), 10000)
        return () => {
          clearInterval(interval);
        }
    }, [])

    return (
      <>
        <ListAlerts alerts={alerts} />
      </>
    )
}
Ответил 03/12/2019 в 00:21
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more