React: प्रतिक्रिया हुक उपयोग प्रभाव में एक लापता निर्भरता है: 'xxx'?

यह आपके प्रश्न का उत्तर देना चाहिए:

https://reactjs.org/docs/hooks-faq.html#is -it-safe-to-omit-functions-from-the-list-of-dependencies

यह आपके प्रश्न का उत्तर देना चाहिए:

https://reactjs.org/docs/hooks-faq.html#is -it-safe-to-omit-functions-from-the-list-of-dependencies

@gaearon
मेरी समस्या का समाधान नहीं हुआ, मेरी समस्या अधिक विशेष है, मेरा रन फंक्शनसेटएलेपोसिशनअर घटकडिडमाउंट और हैंडलक्लिक पर आग लगाना चाहता है, लेकिन रिएक्ट हुक फ़ंक्शन मेरी आवश्यकताओं को पूरा नहीं करता है और एक चेतावनी दिखाई देती है।

मेरा प्रश्न है: प्रतिक्रिया हुक सेटस्टेट ऑपरेशन के लिए उपयोग प्रभाव और फ़ंक्शन घटक में फ़ंक्शन को कॉल नहीं कर सकता है？

खुला छोड़ना ताकि हम दूसरे प्रश्न का उत्तर दे सकें।

मेरे पास एक ही ESLint चेतावनी है लेकिन मेरे मामले में जब मेरा घटक आरोहित होता है तो मैं एक एसिंक कॉल करना चाहता हूं।

const ManageTagsModalBody: React.FC<IProps> = ({ children, getTags }) => {
  useEffect(() => {
    getTags();
  }, []);

  return <div>{children}</div>;
};

Line 12:  React Hook useEffect has a missing dependency: 'getTags'. Either include it or remove the dependency array. If 'getTags' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps 

ManageTagsModalBody किसी भी डेटा पर निर्भर नहीं करता है यह केवल एक रैपर के रूप में उपयोग किया जाता है ताकि डेटा को लोड करने के लिए कभी भी घटक प्रस्तुत किया जा सके। यह ध्यान देने योग्य है कि children घटक getTags प्राप्त डेटा का उपयोग कर रहा है।

मुझे यकीन नहीं है कि निर्भरताओं की सूची में क्या जोड़ना है।

मुझे स्पष्टीकरण के लिए भी दिलचस्पी है।
प्रतिक्रिया हुक उपयोग प्रभाव में एक लापता निर्भरता है: 'प्रेषण'।

  useEffect(() => {
    axios.get('http://localhost:8000/api/future-registrations')
      .then((result) => {
        dispatch(initRegistrationsAction(result.data));
      });
  }, []);

यहाँ वही मुद्दा। अजीब नियम।

मेरा भी यही विचार है। https://github.com/facebook/react/issues/15865#issuecomment -506503377 जितना सरल:

  useEffect(() => {
    dispatch(fetchPosts());
  }, []);

क्या इस चेतावनी को दबाने का कोई तरीका है?

जैसा कि चेतावनी संदेश में सुझाया गया है, आप ऐसा कर सकते हैं

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

@fayway तब जब भी initFetch और प्रेषण मूल्य बदल गया, उपयोग प्रभाव का कॉलबैक निष्पादित किया जाएगा।
वह एक बार कॉलबैक निष्पादित करना चाहता है

@shkyung मेरे मामले में, initFetch कारण नहीं बदलेगा (स्टोर।) प्रेषण या तो नहीं है

शायद ऐसा हो सकता है

const setCenterPosition = useRef(null)
setCenterPosition.current = useCallback( ()=>{} ,[deps])

effect(()=>{ setCenterPosition.current() },[setCenterPosition,otherDeps])

यह परिवर्तन थोड़ा बेतुका और स्पष्ट होने के लिए प्रति-उत्पादक लगता है। बल्कि पुराने संस्करण में रोलबैक करें और आपको इस पर विचार करने दें।

एक ही मुद्दा हो। मैं केवल अपने लाने के लिए घटकडिमाउंट पर आग लगाना चाहता हूं। सरणी में निर्भरता जोड़ने से बार-बार समापन बिंदु पर हिट होती है।

प्रतिक्रिया हुक उपयोग प्रभाव में एक लापता निर्भरता है: 'प्रेषण'।

const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;

useEffect(() => {
  const id = setInterval(() => {
    dispatch({ type: 'tick' }); // Instead of setCount(c => c + step);
  }, 1000);
  return () => clearInterval(id);
}, [dispatch]);

यह काफी सामान्य उपयोग का मामला प्रतीत होता है - एक जिसे मैंने अपने वर्तमान प्रोजेक्ट पर चलाया है।

आप केवल एक बार एक प्रभाव हुक चलाना चाहते हैं, लेकिन एक निर्भरता है, हालांकि आप केवल स्टार्टअप पर उस स्थिति की परवाह करते हैं। वर्तमान में उपयोग कर रहे हैं
// eslint-disable-next-line react-hooks/exhaustive-deps ,
लाइनिंग नियम को बंद करने के लिए लेकिन इस मामले में ऐसा नहीं करना अच्छा होगा।

यह काफी सामान्य उपयोग का मामला प्रतीत होता है - एक जिसे मैंने अपने वर्तमान प्रोजेक्ट पर चलाया है।

आप केवल एक बार एक प्रभाव हुक चलाना चाहते हैं, लेकिन एक निर्भरता है, हालांकि आप केवल स्टार्टअप पर उस स्थिति की परवाह करते हैं। वर्तमान में उपयोग कर रहे हैं
// eslint-disable-next-line react-hooks/exhaustive-deps ,
लाइनिंग नियम को बंद करने के लिए लेकिन इस मामले में ऐसा नहीं करना अच्छा होगा।

क्लोजिंग लिंट सिर्फ एक अस्थायी समाधान है, इस समस्या की कुंजी हुक को समझने के लिए पर्याप्त नहीं है।

यहाँ वही मुद्दा। मैं सिर्फ useEffect() के अंदर एक फ़ंक्शन को आग लगाना चाहता था, [] दूसरे पैरामीटर के रूप में जो मैं चाहता हूं, लेकिन यह यह चेतावनी देता रहता है।

ऐसी अजीब चेतावनी क्योंकि मैंने इसे आज तक किसी नए प्रोजेक्ट पर पहले कभी नहीं देखा। यह घटक के माउंट होने पर केवल एक बार कुछ कॉल करने के उपयोग के मामले को बर्बाद कर देता है। लिंट चेतावनी को अनदेखा करने के अलावा कोई कामकाज प्रतीत नहीं होता है।

मैं यहां अपने दो सेंट डालना चाहता हूं। विशेष रूप से नेटवर्क अनुरोध को रद्द करने के लिए एक्सियोस का उपयोग करने के साथ। जरूरत पड़ने पर एक अलग मुद्दा तैयार करेंगे लेकिन लगा कि इस मुद्दे ने सीधे तौर पर खुद को प्रभावित किया है। तो मेरा उपयोग एपीआई हुक इस प्रकार है -

import axios, { AxiosInstance } from "axios";
import axiosRetry from "axios-retry";
import { FetchEnv } from "../../utilities";
import { useStorage } from "../useStorage";

export const useApi = ({ isAuth = false, retries = 3 } = {}) => {
  const cancelToken = axios.CancelToken.source();
  const { getItem } = useStorage();

  const getBaseUrl = () => {
    return FetchEnv({
      defaultValue: "http://api.example.com",
      key: "API_URI"
    });
  };

  const authorizedClient = (client: AxiosInstance) => {
    const session = getItem("SESSION", "sessionStorage");
    const hasAccessToken = Boolean(session.tokens.accessToken);

    if (isAuth && !hasAccessToken) {
      console.error("No access token found to initiate authorized request.");
      return client;
    } else {
      client.defaults.headers[
        "Authorization"
      ] = `Bearer ${session.tokens.accessToken}`;
      return client;
    }
  };

  const buildFetch = (): AxiosInstance => {
    const client = axios.create({
      baseURL: getBaseUrl(),
      cancelToken: cancelToken.token
    });
    axiosRetry(client, { retries });
    return isAuth ? authorizedClient(client) : client;
  };

  return {
    cancelRequest: cancelToken.cancel,
    fetch: buildFetch()
  };
};

एक घटक के भीतर इस हुक का उपयोग करने के लिए, बस इसे नीचे के रूप में परिभाषित करें, फिर इसका उपयोग माउंट पर, उपयोग के भीतर, ईवेंट हैंडलर आदि के हिस्से के रूप में प्रमाणित और अनधिकृत कॉल दोनों करने के लिए किया जा सकता है। रद्द करने का अनुरोध अद्वितीय रद्द टोकन उत्पन्न होता है कि इस घटक के सापेक्ष "लाने" axios उदाहरण के साथ जोड़ा गया है।

const { cancelRequest, fetch } = useApi();

यदि किसी कारण से यह घटक अलग हो जाता है, तो निम्नलिखित को कहा जाता है:

  useEffect(() => {
    return () => {
      cancelRequest("Auth network request cancelled");
    };
  }, []);

अब यह वर्तमान में पूरी तरह से काम करता है। हालांकि, चेतावनी, जब लागू की जाती है (कैंसल रिक्वेस्ट को उपयोग प्रभाव निर्भरता के रूप में डालते हुए) तुरंत नेटवर्क अनुरोध को रद्द कर देता है जब फ़ेच विधि कहा जाता है। किसी भी सलाह की बहुत सराहना की जाएगी, हालांकि यह वर्तमान में एकमात्र समाधान प्रतीत होगा कि टीएस-लिंट इसे आगे बढ़ने से अक्षम कर देगा ...

मुझे लगता है कि यहां मुद्दा उस तरह से हो सकता है जैसे हम हुक के बारे में सोच रहे हैं। @luojinghui की टिप्पणी से पता चलता है कि आंख से मिलने के अलावा भी बहुत कुछ है। शायद हमें अलग तरह से सोचने की जरूरत है? मैं कुछ रिफैक्टरिंग के साथ अपने एक हुक में इस समस्या को दूर करने में सक्षम हूं। परिणामस्वरूप कोड स्पष्ट है।

इसने मुझे आश्चर्यचकित कर दिया कि क्या, @ स्टोनर609 के उदाहरण में इसके ठीक ऊपर, टाइमिंग कोड useCallback हुक में होना चाहिए? हालांकि एक निर्भरता के रूप में एक फ़ंक्शन (जो स्थिर होना चाहिए) होना अभी भी अजीब है।

मुझे लगता है कि यह मामला किसी प्रकार का अपवाद होना चाहिए

यदि आप घटक लोड होने पर केवल एक बार फ़ंक्शन चलाना चाहते हैं और जो पैरामीटर लेता है तो आप चेतावनी से बचने के लिए useRef का उपयोग कर सकते हैं। कुछ ऐसा काम करता है:

  const InitialPropA= useRef(propA);
  useEffect(() => {
    myFunction(InitialPropA.current);
  }, [myFunction, InitialPropA]);

जैसा कि चेतावनी संदेश में सुझाया गया है, आप ऐसा कर सकते हैं

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

जितना मुझे यह मजाकिया जवाब पसंद है, यह आमतौर पर मेरे कोड में होता है।
मैं नहीं चाहता कि प्रेषण गायब होने के बारे में उन सभी अजीब चेतावनी हो।

मुझे यह जानना अच्छा लगेगा कि रहस्य की उस सरणी में वास्तव में क्या और क्यों होता है :)

जैसा कि चेतावनी संदेश में सुझाया गया है, आप ऐसा कर सकते हैं

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

यह एपीआई जैसी किसी चीज के मामले में मेमोरी लीक भी बना सकता है, यह कॉल को अनंत लूप पर कर देगा।

इसके लिए वास्तव में एक फिक्स की जरूरत है। यह मुझे त्रुटियां देता रहता है और कोई विचार नहीं है कि इसे कैसे हल किया जाए यदि आप केवल एक बार useEffect() अंदर एक फ़ंक्शन को आग लगाना चाहते हैं।

एक ही त्रुटि का सामना करना पड़ रहा है -

रिएक्ट हुक उपयोग प्रभाव में एक लापता निर्भरता है: 'प्रॉप्स'। हालांकि, जब कोई प्रोप बदलता है तो 'प्रॉप्स' बदल जाएगा, इसलिए पसंदीदा फिक्स 'प्रॉप्स' ऑब्जेक्ट को यूजइफेक्ट कॉल के बाहर डिस्ट्रक्चर करना है और उन विशिष्ट प्रॉप्स को यूजइफेक्ट रिएक्ट-हुक/एग्जॉस्ट-डिप्स के अंदर देखें।

कोड -

  useEffect(() => {
    props.dispatch(searchMediaAction("rain"));
  }, []);

@luojinghui : अगर आपने लिंट त्रुटि का समाधान किया है तो मुझे बताएं

वही त्रुटि

समान समस्या। मैं कंपोनेंटडिडमाउंट के व्यवहार की नकल करना चाहता हूं; मुझे चेतावनी में कोई दिलचस्पी नहीं है; जब कुछ भी बदलता है तो मैं हुक को फिर से नहीं चलाना चाहता

मैं इस चेतावनी को नहीं दिखाने का प्रस्ताव दूंगा जब useEffect() का दूसरा तर्क [] , b/c उस स्थिति में डेवलपर जानता है कि यह प्रभाव केवल एक बार चलने वाला है और इसलिए _wants_ का उपयोग करना है प्रारंभिक प्रोप मान और परवाह नहीं करता है कि प्रोप बाद के रेंडर पर बदलता है या नहीं।

मामला एक:
यदि हम चाहते हैं कि फ़ंक्शन इनिशियलाइज़ेशन पर चले और साथ ही जब निर्दिष्ट पैरामीटर मान में बदलते हैं (जैसा कि लिंट चेतावनी से पता चलता है), तो हम उन मापदंडों को सरणी में पास करते हैं।

केस 2:
यदि हम चाहते हैं कि फ़ंक्शन आरंभीकरण पर ठीक एक बार चले , तो हम एक खाली सरणी का उपयोग करते हैं ताकि प्रभाव केवल एक बार ट्रिगर हो।

केस 2 में, हम अनिवार्य रूप से रिएक्ट हुक प्रलेखन विनिर्देशों के अनुसार कंपोनेंटडिडमाउंट इवेंट के लिए सुन रहे हैं। लिंट त्रुटि रिएक्ट हुक प्रलेखन और डेवलपर अपेक्षाओं के साथ असंगत है।

यह बंद क्यों है?

कोई उपाय?

@kennylbj

विभिन्न सुझावों के एक समूह की कोशिश करने के बाद, आखिरकार मेरे लिए यही काम किया। एक नौसिखिया के लिए कोड को अपेक्षाकृत सरल रखने की कोशिश करते हुए, मैंने एस्लिंट-अक्षम का उपयोग नहीं करना पसंद किया। यह दृष्टिकोण आपको अपने प्रेषण फ़ंक्शन को उपयोग कॉलबैक के अंदर लागू किए बिना पास करने की अनुमति देता है। उम्मीद है ये मदद करेगा।

```जावास्क्रिप्ट
// ... फ़ंक्शन घटक के अंदर
कॉन्स्ट {डिस्पैचफंक} = कस्टमहुक ();
const memoizeDispatchFunc = useCallback(dispatchFunc, []);

उपयोग प्रभाव (() => {
memoizeDispatchFunc ();
}, [memoizeDispatchFunc]);
````

क्या हम सिर्फ खाली सरणी को हटा सकते हैं? ऐसा करना काम करने लगता है (कोड अभी भी अपेक्षित रूप से चलता है, और चेतावनी समाप्त हो गई है), लेकिन मुझे नहीं पता कि क्या कोई कारण है कि हमें ऐसा नहीं करना चाहिए।

useEffect(()=>{ myFunc(); } )

@robthedev ग्रेट समाधान।
हम कोड को सरल भी कर सकते हैं यदि हम redux का उपयोग करते हैं:

const dispatch = useDispatch();

// redux can guarantee that the dispatch function will not change between renders.
// so we don't need to wrap it with useCallback for now.
useEffect(() => {
  dispatch(actions());
}, [dispatch]);

डैन का यह लेख मेरी बहुत मदद करता है।

इस समस्या का समाधान एक निर्भरता को हटाना नहीं है, इसके बजाय, हम उन कार्यों को फहरा सकते हैं जिन्हें घटक के बाहर प्रॉप्स या स्थिति की आवश्यकता नहीं है या, उन्हें उपयोग में लपेटें जहां उन्हें परिभाषित किया गया है।

@kennylbj

विभिन्न सुझावों के एक समूह की कोशिश करने के बाद, आखिरकार मेरे लिए यही काम किया। एक नौसिखिया के लिए कोड को अपेक्षाकृत सरल रखने की कोशिश करते हुए, मैंने एस्लिंट-अक्षम का उपयोग नहीं करना पसंद किया। यह दृष्टिकोण आपको अपने प्रेषण फ़ंक्शन को उपयोग कॉलबैक के अंदर लागू किए बिना पास करने की अनुमति देता है। उम्मीद है ये मदद करेगा।

// ... inside function component
const { dispatchFunc } = customHook();
const memoizeDispatchFunc = useCallback(dispatchFunc, []);

useEffect(() => {
  memoizeDispatchFunc();
}, [memoizeDispatchFunc]);

मेरे साथ उपरोक्त उदाहरण काम नहीं करता है।

यह त्रुटि प्राप्त करें:
TypeError: Cannot destructure property 'dispatchFunc' of 'componentDidMount(...)' as it is undefined.

@ प्रतिक्रिया-टीम: हैप्पी बॉयलरप्लेट कोड। :) क्या यह कृपया तार्किक और फिर से पढ़ने योग्य हो सकता है... घटनाओं का उपयोग करना आसान होना चाहिए... बिना किसी फ़ंक्शन को कॉल करने के लिए तर्क की 5+ पंक्तियाँ लिखने की आवश्यकता है।

मेरे लिए, निम्न स्थिति में त्रुटि दिखाई दी:

  useEffect(() => {
    props.getTasks()
  }, [])

मैंने इसे इस तरह ठीक किया:

const { getTasks } = props
  useEffect(() => {
    getTasks()
  }, [getTasks])

जब हजारों देव इसी मुद्दे का सामना करते हैं और रिएक्ट देव टीम धागे को बंद कर देती है और सभी की उपेक्षा करती है:

मेरा मुद्दा इस धागे में दूसरों की तुलना में अलग था, इसलिए मैं इसे साझा करूंगा यदि कोई अन्य गरीब आत्मा खरगोश के छेद से नीचे जाती है तो मैं अभी 1 1/2 घंटे के लिए नीचे हूं

function hydrate( _state, _errors=false) {
    console.log('hydrate()');
    setState({...state,..._state});
    if(_errors){
        setErrors({...errors,..._errors});
    }
}

उपयोगकर्ता से अपेक्षा की जाती है कि वह अपने राज्य को इस प्रकार हाइड्रेट करने के लिए useEffect() साथ इसका उपयोग करेगा:

useEffect(()=>{
    hydrate({
        name:'Garrett',
        email:'[email protected]',
        newsletter: 'yes'
    });
},[hydrate]); //unfortunately, this causes an infinite render, because hydrate will always change

इसलिए इसे हल करने के लिए, मैंने अपने हाइड्रेट फ़ंक्शन को useCallback() में लपेटने के लिए बदल दिया है, अब यह हर रेंडर (मुझे लगता है) में उत्परिवर्तित नहीं है, और माना जाता है कि यह प्रदर्शन के लिए बेहतर है, जो कि अगर यह सच हो जाता है तो मैं मेरे कस्टम हुक से लौटाए गए मेरे सभी सहायक कार्यों के लिए इसे लागू करेगा।

const hydrate = useCallback(( _state, _errors=false )=> {
    console.log('hydrate()');
    setState({...state,..._state});
    if(_errors){
        setErrors({...errors,..._errors});
    }
},[]);

क्या कोई पुष्टि कर सकता है कि क्या यह सच है, useCallback hydrate को रेंडर में उत्परिवर्तित होने से रोक रहा है, और इस प्रकार बेहतर प्रदर्शन के लिए ऐसे सभी कार्यों को useCallback में लपेटना बेहतर है ?

redux can guarantee that the dispatch function will not change between renders.

क्या आपको इस बारे में यकीन हैं?
डॉक्स से लिंक करें जहां यह कहता है कृपया।

अधिक विवरण के लिए https://overreacted.io/a-complete-guide-to-useeffect/#decoupling -updates-from-actions देखें या आप कार्यान्वयन विवरण के लिए

यहाँ मैं सिर्फ वही संदर्भ देता हूँ जो डैन ने कहा था:

इसका उत्तर यह है कि रिएक्ट डिस्पैच फ़ंक्शन को पूरे घटक जीवनकाल में स्थिर रहने की गारंटी देता है। तो ऊपर दिए गए उदाहरण को अंतराल को फिर से सदस्यता लेने की आवश्यकता नहीं है।

प्रेषण समारोह को स्थिर रहने की गारंटी देता है

अच्छा है धन्यवाद!

जब हजारों देव इसी मुद्दे का सामना करते हैं और रिएक्ट देव टीम धागे को बंद कर देती है और सभी की उपेक्षा करती है:

बहुत ज्यादा यह। यहां मैं हुक दे रहा हूं और मुझे इस चेतावनी के साथ बधाई दी गई है जिसका कोई मतलब नहीं है और किसी भी आधिकारिक दस्तावेज़ में शामिल नहीं है। वास्तव में आपको आश्चर्य होता है कि क्या हुक गंभीर कार्य के लिए तैयार हैं, जब "कृपया इस प्रभाव को केवल एक बार चलाएं" जैसे बुनियादी उपयोग के मामले में इतनी परेशानी होती है।

खैर, कहने के लिए और कुछ नहीं, इस तथ्य को छोड़ दें कि धागा बंद है smh।

एक ही समस्या का सामना करना पड़ता है!

समाधान,
(जो मेरे लिए काम किया):

const onInit = function(){ 
    console.log('initiated', Date.now());
}

useEffect(onInit, []);

मैं इस मुद्दे को लाइनिंग साइड पर तय करना पसंद करूंगा, लेकिन हे ...

@ ra30r अच्छा समाधान लेकिन सोच रहा था कि क्या यह दुष्प्रभाव पैदा कर सकता है? :विचारधारा:

अब तक कुछ भी नहीं? मैं

मेरे पास एक मामला था जहां मैंने उदमी पर एक कोर्स से फॉर्म सत्यापन त्रुटियों को ट्रिगर करना सीखा।

इसने लापता निर्भरता "प्रेषण" को ट्रिगर किया, लेकिन फिर भी काम किया:

  useEffect(() => {
    if (state.business_name.value) {
      const delay = setTimeout(() => dispatch({ type: "businessNameAfterDelay" }), 1000)
      return () => clearTimeout(delay)
    }
  }, [state.business_name.value])

@ ra30r के उदाहरण का उपयोग करते हुए, मैंने त्रुटि को दूर करने के लिए इसे इसमें बदल दिया:

  const businessNameAfterDelay = function () {
    if (state.business_name.value) {
      const delay = setTimeout(() => dispatch({ type: "businessNameAfterDelay" }), 1000)
      return () => clearTimeout(delay)
    }
  }

  useEffect(businessNameAfterDelay, [state.business_name.value])

यह बंद क्यों है?

मेरा मानना ​​​​है कि एक उत्तर कहीं दिया गया है .. योग्य .. वैसे भी .. समाधान इस तरह करना है:
useEffect(() => { dispatch(); }, [dispatch]);

उम्मीद है ये मदद करेगा!!

यह बंद क्यों है?

मेरा मानना ​​​​है कि एक उत्तर कहीं दिया गया है .. योग्य .. वैसे भी .. समाधान इस तरह करना है:
useEffect(() => { dispatch(); }, [dispatch]);

उम्मीद है ये मदद करेगा!!

हां, वह कामकाज काम करता है, @kennylbj ने कुछ समय पहले यहां कहा था।
मसला क्यों बंद है? इसके बारे में यहाँ मीम्स भी हैं... xd

मेरी समस्या इस तरह की है (नमूना कोड):

  const [userStatus, setUserStatus]: any = React.useState([]);
  const [userData, setUserData]: any = React.useState([]);

  useEffect(() => {
    setUserStatus(!userStatus);
    return () => {};
  }, [userData]);

तो कोड के रूप में आप userStatus मूल्य बदलना चाहते हैं जब userData में कोई परिवर्तन होता है और इस मामले में यदि आप userStatus मूल्य की जांच करना चाहते हैं तो आपने इसे deps में जोड़ दिया है:

  const [userStatus, setUserStatus]: any = React.useState([]);
  const [userData, setUserData]: any = React.useState([]);

  useEffect(() => {
    setUserStatus(!userStatus);
    return () => {};
  }, [userData, userStatus]);

इस परिदृश्य में यह कभी न खत्म होने वाला लूप होगा

@spmsupun
आप useState की कॉलबैक-शैली का उपयोग कर सकते हैं, useEffect की निर्भरता सरणी में userStatus चर को शुरू करने से बचने के लिए।

 useEffect(() => {
    setUserStatus(prevState => !prevState);
    return () => {};
  }, [userData]);

और इसे तथाकथित कार्यात्मक अद्यतन कहते

समाधान -> निर्भरता के लिए बस प्रेषण जोड़ें
प्रतिक्रिया हुक उपयोग प्रभाव में एक लापता निर्भरता है: 'प्रेषण'।

  useEffect(() => {
    axios.get('http://localhost:8000/api/future-registrations')
      .then((result) => {
        dispatch(initRegistrationsAction(result.data));
      });
**  }, [dispatch]);**

@kennylbj जब आप एक राज्य से

@spmsupun लेकिन मुझे लगता है कि पिछले श्रोता को अपंजीकृत करना और एक नया श्रोता पंजीकृत करना काफी सामान्य है, जब भी निर्भरता सरणी में चर बदलते हैं (उदाहरण के लिए। जब ​​उपयोगकर्ता प्रॉप्स में बदल जाता है, तो श्रोता को भी बदलने की आवश्यकता होती है)। और यह व्यवहार वही है जो प्रतिक्रिया की अपेक्षा करता है।

यदि आप अभी भी श्रोता को दो बार कॉल नहीं करना चाहते हैं, तो मुझे लगता है कि आपको इसके पास दिए गए प्रॉप्स का अधिक ध्यान रखना चाहिए और यह सुनिश्चित करना चाहिए कि इसे रेंडर के दौरान नहीं बदला जाएगा।

@kennylbj अच्छी तरह से मैं अपंजीकृत करता हूं लेकिन फिर भी यह एक अच्छा अभ्यास नहीं है

मान लीजिए मुझे इसे श्रोता वर्ग से संभालना है,

ऐसा लगता है कि सॉकेट आईडी समान होने पर भी आपके श्रोता को दो बार बुलाया जाता है।

मुझे नहीं लगता कि ऐसा होगा यदि निम्नलिखित स्थिति मिलती है:

ts // call useEffect if and only if sockeId changed. useEffect(() => { const unregister = register(socketId); return () => unregister(socketId); }, [socketId])

क्या विभिन्न रेंडरर्स के दौरान निर्भरता सरणी में कोई अन्य चर बदल गया है और इस व्यवहार का कारण बनता है?

हाँ 3 निर्भरताएँ, लेकिन मैं इसे कुछ अलग तरीके से समझती हूँ

पिएन

जैसा कि चेतावनी संदेश में सुझाया गया है, आप ऐसा कर सकते हैं

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

वाह

🚀 कोड स्निपेट के नीचे मेरे लिए वास्तव में अच्छा काम करता है

घटक पर माउंट किया गया

const onInit = () => getUsers()
useEffect(onInit, [])

पैरामीटर परिवर्तन पर

const onInit = () => getUser(id)
useEffect(onInit, [id])

सर्वोत्तम कार्य-आसपास: प्रतिक्रिया-हुक/संपूर्ण-डिप्स: "बंद"
मुझे यह एस्लिंट फीचर कभी भी उपयोगी नहीं लगा। कभी।

🚀 कोड स्निपेट के नीचे मेरे लिए वास्तव में अच्छा काम करता है

घटक पर माउंट किया गया

const onInit = () => getUsers()
useEffect(onInit, [])

पैरामीटर परिवर्तन पर

const onInit = () => getUser(id)
useEffect(onInit, [id])

अच्छा काम।

मुझे नहीं लगता कि प्रतिक्रिया दस्तावेज़ @luojinghui के उपयोग के मामले को काफी कवर करते हैं, यह भी वही है जो मेरे पास है:

किसी दिए गए फ़ंक्शन को कॉल करने के हमारे पास कई तरीके हैं, अर्थात: setCenterPosition() । इसे राज्य परिवर्तन ( useEffect माध्यम से जुड़ा हुआ), एक क्लिक हैंडलर (सीधे कहा जाता है), आदि को देखकर बुलाया जा सकता है।

प्रतिक्रिया दस्तावेज़ सुझाव देते हैं

यही कारण है कि आम तौर पर आप इसके अंदर प्रभाव से आवश्यक कार्यों को घोषित करना चाहेंगे

लेकिन आम तौर पर वास्तविक दुनिया के उदाहरणों में, हमें ऐसे कार्यों का पुन: उपयोग करने की आवश्यकता होती है जैसे हम सामान्य रूप से एक वर्ग घटक ( this.setCenterPosition(...) ) पर उदाहरण विधियों के साथ करते हैं, और मुझे आश्चर्य होता है कि क्या हुक वास्तव में फीचर-पूर्ण के लिए अच्छे हैं, जटिल घटक।

मैं वास्तव में निश्चित नहीं हूं, लेकिन शायद समाधान useCallback

const setCenterPosition = useCallback(() => {
  ...
}, [Stage, elePositionArr, setElePositionArr]);

useEffect() => {
  ...
}, [stageRef, Stage, currentIndex, setCenterPosition]);

लेकिन यह मेरे लिए थोडा सकल है, और मुझे उम्मीद है कि एक क्लीनर तरीका है। शायद @gaearon पुष्टि कर सकता है?

उसी समस्या का सामना करना पड़ रहा है, मैं उपयोग के अंत में इस लाइन का उपयोग करके चेतावनी बू को अक्षम कर सकता हूं प्रभाव // eslint-disable-next-line react-hooks/exhaustive-deps लेकिन मैं इसका उपयोग नहीं करना चाहता

यहाँ मेरा कोड है

`कॉन्स्ट [आइटम, सेट इटम्स] = यूज़स्टेट ([
{
नाम: "टेस्ट 1",
आईडी: 1
},
{
नाम: "टेस्ट 2",
आईडी: 2
},
{
नाम: "टेस्ट 3",
आईडी: 3
},
{
नाम: "टेस्ट 4",
आईडी: 4
},
{
नाम: "टेस्ट 5",
आईडी: 5
}
]);

उपयोग प्रभाव (() => {
कॉन्स्ट इंटरवल आईडी = सेटइंटरवल (() => {
setItems (शफलअरे (आइटम));
}, 1000);
वापसी () => {
स्पष्ट अंतराल (अंतराल आईडी);
};
// एस्लिंट-अक्षम-अगली-पंक्ति प्रतिक्रिया-हुक/संपूर्ण-डिप्स
}, []);

इस समस्या का मेरा समाधान केवल इन मामलों के लिए रिएक्ट हुक का उपयोग करना बंद करना है। यदि आपको घटक को बहुत सारे राज्य तर्क और जीवनचक्र की घटनाओं जैसे componentDidMount है, तो बस एक वर्ग घटक का उपयोग करें और अपने आप को सिरदर्द से बचाएं। कक्षा के घटक पूरी तरह से ठीक हैं, और यदि यह धागा कुछ भी साबित करता है, तो यह है कि जटिल राज्य तर्क या जीवनचक्र की घटनाओं की आवश्यकता होने पर रिएक्ट हुक उन्हें पूरी तरह से बदलने के लिए तैयार नहीं हैं (न ही वे इनमें से अधिकांश मामलों में कोई लाभ प्रदान करते हैं - क्या आपका कोड _really_ है रिएक्ट हुक का उपयोग करने के लिए यह बहुत बेहतर है?)

मैं बूलियन झंडे और उस तरह की चीज़ों को सेट करने के लिए useState जैसे सरल लोगों के लिए रिएक्ट हुक के अपने स्वयं के उपयोग को सीमित कर दूंगा। यदि कोई घटक कभी भी useEffect आवश्यकता के लिए पर्याप्त जटिल हो जाता है तो मैं इसे एक संकेत के रूप में मानता हूं कि शायद एक वर्ग घटक सिर्फ एक बेहतर फिट है।

(स्पष्टता के लिए संपादित)।

यह अभी के लिए मेरा समाधान है:

const mounted = () => {
  dispatch(something());
}

useEffect(mounted, []);

धन्यवाद @ra30r प्रतिक्रिया/मुद्दे/15865#इश्यू कमेंट-651254164