Wywołanie API co X sekund w React składnik funkcjonalny

głosy
0

I mają następujące klasy składników reakcji do wywołania API co 10 sekund. Jego działa bez żadnych problemów.

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

Staram tajnych to do reakcji składnik funkcjonalny. To jest mój próba tak daleko.

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

Proszę może ktoś mi pomóc zakończyć przykład? Czy useEffect prawidłowe użycie lub tam jest lepszym rozwiązaniem?

Każda pomoc będzie mile widziane

Utwórz 02/12/2019 o 23:55
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
2

Jednym z problemów jest to, że this.getEndpointnie będzie działać ze składnika funkcyjnego. Wydaje się, że oryginalny Alertskomponent klasy brakuje kodu ponieważ muszą być wdrażane gdzieś.

Inną kwestią jest to, że przerwa nie jest czyszczone - należy zwrócić funkcję oczyszczania organizmu z mocą, aby usunąć timer.

Wreszcie nie ma powodu, aby ponownie zdefiniować getAlertsna każdy render, definiując go raz wewnątrz korpusu efekt byłby lepszy.

Po oczyszczeniu jakieś brakujące parens itp moja ostateczna realizacja będzie wyglądać mniej więcej tak:

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} />
      </>
    )
}
Odpowiedział 03/12/2019 o 00:21
źródło użytkownik

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