प्रतिक्रिया राउटर जहां AJAX

Question

का उपयोग करना है, मैं React Router का उपयोग कर एक प्रोजेक्ट पर काम कर रहा हूं, और मुझे डेटा प्रवाह के साथ कुछ समस्याएं आ रही हैं।

प्रत्येक पृष्ठ पर एक AJAX कॉल होता है जो घटक के लिए डेटा प्राप्त करता है। मैं उन्हें componentDidMount में डाल दिया है:

// Below code is written in ES6 
componentDidMount(){ 
    $.get(someURL, (data)=>{ 
    this.setState({data:data}) 
    }) 
} 

हालांकि इस प्रारंभिक लोड पर काम करता है, इसे फिर से जब यूआरएल परिवर्तन (एक मैनुअल ताज़ा की जरूरत है) कहा जाता है प्राप्त करता है। AJAX कॉल रखने के लिए मुझे उचित life cycle नहीं मिल रहा है।

कोई मुझे प्रतिक्रिया राउटर में डेटा प्राप्त करने के उचित दृष्टिकोण के साथ प्रबुद्ध करता है।

Answer 1

कुछ खोज के बाद, this README अंततः समस्या हल करता है।

2 समाधान दस्तावेज़ में उल्लिखित हैं:

1. उपयोग addHandlerKey={true}:

   <Route handler={User} path="/user/:userId" addHandlerKey={true} />

2. उपयोग componentWillReceiveProps बजाय componentDidMount।

   • मैं प्रारंभिक लोड के लिए, componentWillReceiveProps बाद लोगों के लिए दोनों, componentDidMount का उपयोग कर समाप्त हो गया।
   • चूंकि वे एक ही कोड साझा करते हैं, इसलिए मैंने एक नया फ़ंक्शन _updateState बनाया और इसे दोनों जीवनशैली में बुलाया।

---

अब मेरे कोड:

class Classes extends React.Component { 
    componentDidMount(){ this._updateState() } 
    componentWillReceiveProps(){ this._updateState() } 
    _updateState(){ 
    $.get(/*Some URL*/, (data)=>{ 
     this.setState({data:data}) 
    }) 
    } 
}