API-Aufruf alle x Sekunden in Reaktion Functional Component

stimmen
0

Ich habe folgende reagieren Klasse Komponente alle 10 Sekunden eine API aufrufen. Seine arbeitet ohne Probleme.

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

Ich versuche, diese verdeckte auf eine reagieren funktionale Komponente. Dies ist mein Versuch so weit.

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

Bitte kann mir jemand helfen das Beispiel abzuschließen? Ist useEffect die korrekte Verwendung oder gibt es eine bessere Option?

Jede Hilfe wäre willkommen

Veröffentlicht am 02/12/2019 um 23:55
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
2

Ein Problem dabei ist , dass this.getEndpointnicht von einer Funktionskomponente arbeiten. Es scheint , die ursprüngliche AlertsKlassenkomponente einen Code fehlt da , dass irgendwo umgesetzt werden müssen.

Ein weiteres Problem ist, dass das Intervall nicht gereinigt werden - sollten Sie eine Bereinigungsfunktion von dem Effekt Körper zurückkehren den Timer zu löschen.

Schließlich gibt es keinen Grund neu zu definieren getAlertsauf jeder machen, es einmal im Inneren des Effekts Körper besser wäre zu definieren.

Nach der Reinigung einiger fehlenden Pars up usw. würde meine endgültige Umsetzung in etwa so aussehen:

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} />
      </>
    )
}
Beantwortet am 03/12/2019 um 00:21
quelle vom benutzer

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