अनंत लूप जब componentWillReceiveProps

Question

में डिस्पैच मैं एक प्रोफ़ाइल घटक है कि प्रतिक्रिया-रूटर द्वारा लोड किया जाता है है इस (redux-api-मिडल वेयर) की तरह दिखता है: उपयोगकर्ता नाम और लोड करने के लिए है कि उपयोगकर्ताओं को प्रोफ़ाइल जानकारी:

function fetchUser(id) { 
    let token = localStorage.getItem('jwt'); 
    return { 
    [CALL_API]: { 
     endpoint: `http://localhost:3000/api/users/${id}`, 
     method: 'GET', 
     headers: { 'x-access-token': token }, 
     types: [FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE] 
    } 
    } 
} 

कारण मैं componentWillReceiveProps समारोह जोड़ा जब दूसरे के लिए URL परिवर्तन प्रतिक्रिया करने के लिए है। पहली नज़र में सबकुछ काम करता प्रतीत होता है लेकिन फिर मैंने देखा कि उस घटक को डिबग करने के दौरान WillReceiveProps फ़ंक्शन को अनंत लूप में बुलाया जाता है और मुझे नहीं पता कि क्यों। यदि मैं घटक WillReceiveProps को हटा देता हूं तो प्रोफ़ाइल को नए उपयोगकर्ता नाम से अपडेट नहीं किया जाता है लेकिन फिर मेरे पास कोई लूप समस्या नहीं है। कोई विचार?

Answer 1

तो आपका घटक WillReceiveProps एक अनंत लूप में क्यों है, इसलिए यह कारण हर बार प्रॉप्स बदल जाता है और आप fetchUser को कॉल कर रहे हैं जो प्रॉप्स को बदल देगा जो एक क्रिया प्रेषित करेगा।

जाँच करने के लिए करता है, तो विशिष्ट प्रोप परिवर्तन देखने https://stackoverflow.com/a/36207102/2085190

Answer 2

एक शर्त रंगमंच की सामग्री की तुलना करने के जोड़ने की कोशिश एक तुलना जोड़ें। अगर आपके घटक को इसकी जरूरत है।

componentWillRecieveProps(nextProps){ 
if(nextProps.value !== this.props.value) 
    dispatch(action()) //do dispatch here 
} 

Answer 3

तरह प्रोफ़ाइल/कुछ पथ पैरामीटर वाला मार्गों प्रतिक्रिया यदि आपके पास: उपयोगकर्ता नाम, आप बस props.location.pathname

componentWillReceiveProps(nextProps){  
    if(nextProps.location.pathname !== this.props.location.pathname){ 
      dispatch() 
     } 
}