नया प्रोप (ReactJS)

Question

प्राप्त करते समय राज्य अपडेट नहीं हो रहा है मैं प्रतिक्रिया के लिए नया हूं। मैं इस पर अटक गया हूं, वास्तव में कुछ मदद की सराहना करता हूं!

एक मूल घटक इस बच्चे के घटक में एक सरणी पास करेगा। जब मैं console.log (this.props.repairs) यह मुझे 4 की एक सरणी दिखाता है। मैं इस .state.sortedDataList को अद्यतन करने का प्रयास कर रहा हूं जब भी मरम्मत की सरणी पास हो जाती है। Console.log (this.state) अभी भी है एक खाली सरणी के रूप में sortedDataList दिखा रहा है।

मैं क्या गलत कर रहा हूं? बहुत बहुत धन्यवाद, किसी भी मदद की सराहना करते हैं।

class Repairs extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     sortedDataList: [] 
    }; 
    } 

    componentWillReceiveProps(nextProps) { 
    if(this.props != nextProps) { 
     this.setState({ 
     sortedDataList: this.props.repairs 
     }); 
    } 
    } 

    render() { 
    console.log(this.props); 
    console.log(this.state); 

    return (
     <div></div> 
    ); 
    } 
} 

Answer 1

componentWillReceiveProps पहले प्रस्तुत करने पर नहीं कहा जाता है। यही कारण है कि यह है कि आप किसी भी अद्यतन राज्य में

से देख पा रहे हैं है React Docs:

"।। लागू जब एक घटक नए मंच प्राप्त कर रहा है इस विधि प्रारंभिक प्रस्तुत करना के लिए बुलाया नहीं है"

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

class Repairs extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     sortedDataList: [] 
 
    }; 
 
    } 
 

 
    componentWillMount() { 
 
    
 
     this.setState({ 
 
     sortedDataList: this.props.repairs 
 
     },() => console.log(this.state.sortedDataList)); 
 
    
 
    } 
 
    componentWillReceiveProps(nextProps) { 
 
    if(this.props != nextProps) { 
 
     this.setState({ 
 
     sortedDataList: nextProps.repairs 
 
     }); 
 
    } 
 
    } 
 

 
    render() { 
 
    console.log("r",this.props); 
 
    console.log("r",this.state); 
 

 
    return (
 
     <div></div> 
 
    ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    render() { 
 
    var arr = ["1", "2", "3"]; 
 
    return (
 
     <div > 
 
     <Repairs repairs={arr}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

अपने निर्माता में

this.state = { 
    sortedDataList: [] 
}; 

आप शुरू में राज्य एक खाली सरणी के लिए सेट इतने पर पहले प्रस्तुत करना यह खाली हो जाएगा। फिर, जब भी प्रोप बदल जाते हैं, तो यह घटक WillReceiveProps() के माध्यम से अपडेट हो जाएगा।

जैसा कि शुभम ने कहा, घटकविल्लरसेवप्रॉप() को पहले प्रस्तुत करने पर नहीं कहा जाता है। आप सही से पहले प्रस्तुत करना रंगमंच की सामग्री को प्रतिबिंबित करने के राज्य चाहते हैं, आप तो जैसे निर्माता में रख करना होगा:

this.state = { 
    sortedDataList: this.props.repair 
}; 

Answer 3

कोई बात नहीं, मेरी मूर्खतापूर्ण गलती मिल गया! यदि भविष्य में कोई और इस पर फंस जाता है ...

componentWillReceiveProps(nextProps) { 
    if(this.props != nextProps) { 
    this.setState({ 
     sortedDataList: nextProps.repairs 
    }); 
    } 
}