हैलो मेरे पास एक साधारण एप्लिकेशन है जहां मैं समय अंतराल के साथ useEffect का उपयोग करके हर 3 सेकंड में डेटा प्राप्त करता हूं। कंसोल में लॉग इन करके सब कुछ आवश्यक खरीद के रूप में काम करता है मैं देखता हूं कि मेरा उपयोग प्रभाव दो बार काम करता है, यह एक ही समय में लगभग दो बार fetchData फ़ंक्शन को कॉल करता है। मुझे लगता है कि मुझे अपने कोड में कुछ याद आ रहा है। आपके सहयोग के लिए धन्यवाद!

       useEffect(() => {
        const interval = setInterval(() => {
          fetchChatData();
        }, 3000);
        return () => clearInterval(interval);
      });

  const fetchChatData = () => {
    setError(null);

    async function fetchData() {
      const request = await axios.get(
        "https://api.jsonbin.io/v3/b/60e6d8a81f8e4a7f2a",
        {
          headers: {
            "Content-Type": "application/json",
            "X-Master-Key":
              "$2b$10$OSaM64SeFaeWQMwrro08kuypgEG7Q",
          },
        }
      );
      const responseData = await request.data;
      chatCtx.setChatData(responseData.record);
    }

    fetchData();
    fetchData().catch((error) => {
      setError(error.response.data.message);
    });
  };
0
Dovtutis 9 जुलाई 2021, 09:32

2 जवाब

मुझे आपके सभी कॉम्पोनेंट का कोड नहीं दिख रहा है, लेकिन एक useEffect जैसा कि हर कंपोनेंट के री-रेंडर पर चलता है। Juat useEffect के दूसरे पैरामीटर के रूप में एक खाली सरणी का विज्ञापन करता है और यह केवल पहले घटक के रेंडर को चलाएगा। कुछ इस तरह:

      useEffect(() => {
        const interval = setInterval(() => {
          fetchChatData();
        }, 3000);
        return () => clearInterval(interval);
      }, []);
1
Giovanni Esposito 9 जुलाई 2021, 06:45

मैं 2 हुक का उपयोग करूंगा। घटक लोड होने पर पहला हुक निष्पादित होता है और इसलिए इसकी निर्भरता सरणी एक खाली सरणी पर सेट होती है []

useEffect(()=>{
   // invoke web service to read data into the chatData state variable 
   // when the component loads for the first time
},[])

फिर मेरे पास एक और useEffect हुक है जिसमें chatData स्टेट वेरिएबल सेट है जो इसकी निर्भरता सरणी में है। वेब सेवा को लागू करने से पहले यह हुक 3 सेकंड तक प्रतीक्षा करेगा।

useEffect(()=>{
   // wait 3 seconds
   // invoke web service to read data into the chatData state variable
},[chatData])

हर बार दूसरे हुक में वेब सेवा का आह्वान किया जाता है, chatData हुक में निर्भरता बदल जाएगी और यह बदले में इस हुक को अनिश्चित काल के लिए फिर से चालू कर देगा।

0
allkenang 9 जुलाई 2021, 06:44