कॉल एपीआई हर एक्स सेकंड में कार्यात्मक घटक प्रतिक्रिया

वोट
0

मैं निम्नलिखित वर्ग घटक प्रतिक्रिया एक API हर 10 सेकंड कॉल करनी होगी। इसका कोई मुद्दों के साथ काम करता है।

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

मैं एक प्रतिक्रिया कार्यात्मक घटक को यह गुप्त कोशिश कर रहा हूँ। यह मेरा प्रयास अब तक है।

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

कृपया कर सकते हैं किसी को मदद के लिए मुझे उदाहरण को पूरा? useEffect सही उपयोग है या एक बेहतर विकल्प है?

किसी भी सहायता की सराहना की जाएगी

02/12/2019 को 23:55
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
2

यहाँ एक मुद्दा यह है कि this.getEndpointएक समारोह घटक से काम नहीं करेगा। यह मूल लगता Alertsवर्ग घटक कुछ कोड याद आ रही है कि कहीं न कहीं लागू किया जाना चाहिए के बाद से।

एक और मुद्दा यह है कि अंतराल साफ नहीं किया जा रहा है - आप प्रभाव शरीर से एक सफाई समारोह लौटना चाहिए टाइमर स्पष्ट करने के लिए।

अन्त में करने के लिए कोई कारण नहीं है फिर से परिभाषित getAlertsहर प्रस्तुत करना पर, एक बार प्रभाव शरीर के अंदर यह परिभाषित करने बेहतर होगा।

कुछ याद आ रही कोष्ठक को साफ करने के बाद, आदि अपने अंतिम कार्यान्वयन कुछ ऐसा दिखाई देगा:

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} />
      </>
    )
}
03/12/2019 को 00:21
का स्रोत उपयोगकर्ता

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