Chiamata API ogni X secondi in Reagire componente funzionale

voti
0

Ho la seguente reagire componente classe chiamare un'API ogni 10 secondi. Il suo funziona senza problemi.

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} />
      </>
    )
  }
}

Sto cercando convertirlo ad un componente funzionale reagire. Questo è il mio tentativo finora.

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} />
      </>
    )
}

Per favore qualcuno può aiutarmi a completare l'esempio? useEffect è l'uso corretto o c'è una soluzione migliore?

Qualsiasi aiuto sarebbe apprezzato

È pubblicato 02/12/2019 alle 23:55
fonte dall'utente
In altre lingue...                            


1 risposte

voti
2

Un problema qui è che this.getEndpointnon funziona da un componente di funzione. Sembra che l'originale Alertscomponente di classe manca un codice dal momento che devono essere attuate da qualche parte.

Un altro problema è che l'intervallo non è stato ripulito - si dovrebbe restituire una funzione di pulizia dal corpo effetto per cancellare il timer.

Infine c'è alcuna ragione per ridefinire getAlertssu ogni rendering, definente una volta all'interno del corpo effetto sarebbe meglio.

Dopo la pulizia alcune parentesi mancanti, ecc mia implementazione finale sarebbe simile:

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} />
      </>
    )
}
Risposto il 03/12/2019 a 00:21
fonte dall'utente

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