Call API Iedere X seconden in React Functional Component

Question

Call API Iedere X seconden in React Functional Component

stemmen

0

Ik heb de volgende reageren klasse component om een API te bellen om de 10 seconden. Het werkt zonder problemen.

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

Ik probeer geheime dit een te reageren functionele component. Dit is mijn poging tot nu toe.

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

Gelieve te kunnen iemand me helpen voltooien het voorbeeld? Is useEffect het juiste gebruik of is er een betere optie?

Elke hulp zou worden gewaardeerd

reactjs react-native react-component react-context react-functional-component

De vraag is gesteld op 02/12/2019 om 21:55
bron van user hawx

In andere talen...

1 antwoorden

azundo · Answer 1 · 2019-12-02 22:21

Een probleem hierbij is dat this.getEndpointniet zal werken vanuit een functie component. Het lijkt erop dat de oorspronkelijke Alertsklasse component ontbreken enkele code sinds die ergens moeten worden uitgevoerd.

Een ander probleem is dat het interval niet wordt opgeruimd - moet u een cleanup functie terug te keren van het effect lichaam om de timer op nul.

Ten slotte is er geen reden om opnieuw te definiëren getAlertsop elke maken, definiëren eenmaal binnen het effect lichaam beter zou zijn.

Na het opruimen van een aantal ontbrekende parens, etc. mijn uiteindelijke implementatie zou er ongeveer zo uitzien:

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