Appel API toutes les x secondes dans React Composante fonctionnelle

voix
0

J'ai la suite réagir le composant de classe pour appeler une API toutes les 10 secondes. Ses travaux ont sans problème.

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

Je suis en train covert à un composant fonctionnel réagir. Ceci est ma tentative à ce jour.

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

S'il vous plaît peut-elle aider quelqu'un me compléter l'exemple? useEffect est l'utilisation correcte ou est-il une meilleure option?

Toute aide serait appréciée

Créé 02/12/2019 à 23:55
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
2

Un problème ici est que this.getEndpointne fonctionnera pas à partir d' une composante de fonction. Il semble l'original Alertscomposante de la classe est manquant depuis un certain code qui doit être mis en œuvre quelque part.

Un autre problème est que l'intervalle n'est pas nettoyé - vous devez retourner une fonction de nettoyage du corps d'effet pour effacer la minuterie.

Enfin , il n'y a aucune raison de redéfinir getAlertsà chaque rendu, définir une fois à l' intérieur du corps de l' effet serait mieux.

Après le nettoyage des parens manquants, etc. ma mise en œuvre finale ressemblerait à quelque chose comme:

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} />
      </>
    )
}
Créé 03/12/2019 à 00:21
source utilisateur

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