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

Question

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

वोट

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 सही उपयोग है या एक बेहतर विकल्प है?

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

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

02/12/2019 को 23:55
का स्रोत उपयोगकर्ता hawx

अन्य भाषाओं में...

1 जवाब

azundo · Answer 1 · 2019-12-03 00:21

यहाँ एक मुद्दा यह है कि 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} />
      </>
    )
}