Call API hvert X sekund i React Funksjonell Component

stemmer
0

Jeg har følgende reagere klassen komponent til å kalle en API hvert 10. sekund. Dens fungerer uten problemer.

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

Jeg prøver covert dette til en reagere funksjonell komponent. Dette er mitt forsøk så langt.

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

Vennligst kan noen hjelpe meg å fullføre eksempel? Er useEffect riktig bruk, eller er det et bedre alternativ?

Eventuelle hjelpe ville være verdsatt

Publisert på 02/12/2019 klokken 23:55
kilden bruker
På andre språk...                            


1 svar

stemmer
2

Ett problem her er at this.getEndpointikke vil fungere fra en funksjon komponent. Det synes den opprinnelige Alertsklassen komponent mangler noen kode, siden det må gjennomføres et sted.

En annen sak er at intervallet ikke blir ryddet opp - du skal returnere en opprydding funksjon fra effekt kroppen til å slette timer.

Til slutt er det ingen grunn til å re-definere getAlertspå hver gjengi, definerer det en gang inne på effekten kroppen ville være bedre.

Etter rengjøring opp noen mangler parens, etc. min endelige gjennomføringen vil se omtrent slik ut:

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} />
      </>
    )
}
Svarte 03/12/2019 kl. 00:21
kilden bruker

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