रिएक्ट फॉर्म

Question

में प्रोप बदलने पर राज्य को अपडेट करना मुझे एक प्रतिक्रिया फॉर्म में समस्या हो रही है और राज्य को सही तरीके से प्रबंधित करना है। मेरे पास एक फॉर्म में एक इनपुट इनपुट फ़ील्ड है (एक मोडल में)। प्रारंभिक मान getInitialState में एक राज्य चर के रूप में सेट किया गया है, और इसे मूल घटक से पास किया जाता है। यह अपने आप में ठीक काम करता है।

समस्या तब आती है जब मैं मूल घटक के माध्यम से डिफ़ॉल्ट start_time मान को अद्यतन करना चाहता हूं। अपडेट स्वयं पेरेंट घटक में setState start_time: new_time के माध्यम से होता है। हालांकि मेरे रूप में, डिफ़ॉल्ट स्टार्ट_टाइम मान कभी नहीं बदलता है, क्योंकि इसे केवल getInitialState में परिभाषित किया जाता है।

मैंने componentWillUpdate का उपयोग setState start_time: next_props.start_time के माध्यम से राज्य में बदलाव को मजबूर करने के लिए किया है, जो वास्तव में काम करता था, लेकिन मुझे Uncaught RangeError: Maximum call stack size exceeded त्रुटियां मिलीं।

तो मेरा सवाल यह है कि इस मामले में राज्य को अद्यतन करने का सही तरीका क्या है? क्या मैं किसी भी तरह इस गलत के बारे में सोच रहा हूँ?

वर्तमान कोड:

@ModalBody = React.createClass 
    getInitialState: -> 
    start_time: @props.start_time.format("HH:mm") 

    #works but takes long and causes: 
    #"Uncaught RangeError: Maximum call stack size exceeded" 
    componentWillUpdate: (next_props, next_state) -> 
    @setState(start_time: next_props.start_time.format("HH:mm")) 

    fieldChanged: (fieldName, event) -> 
    stateUpdate = {} 
    stateUpdate[fieldName] = event.target.value 
    @setState(stateUpdate) 

    render: -> 
    React.DOM.div 
     className: "modal-body" 
     React.DOM.form null, 
     React.createElement FormLabelInputField, 
      type: "time" 
      id: "start_time" 
      label_name: "Start Time" 
      value: @state.start_time 
      onChange: @fieldChanged.bind(null, "start_time”) 

@FormLabelInputField = React.createClass 
    render: -> 
    React.DOM.div 
     className: "form-group" 
     React.DOM.label 
     htmlFor: @props.id 
     @props.label_name + ": " 
     React.DOM.input 
     className: "form-control" 
     type: @props.type 
     id: @props.id 
     value: @props.value 
     onChange: @props.onChange 

Answer 1

अगर मैं सही ढंग से समझ, आप एक माता पिता के घटक है कि नीचे start_time गुजर रहा है ModalBody घटक है जो यह अपने आप ही राज्य को आवंटित करने के लिए है? और आप उस समय माता-पिता से अपडेट करना चाहते हैं, न कि बच्चे के घटक।

React has some tips on dealing with this scenario. (नोट, यह एक पुराना लेख है जिसे बाद में वेब से हटा दिया गया है। वर्तमान doc on component props पर एक लिंक है)।

getInitialState में राज्य उत्पन्न करने के लिए प्रोप का उपयोग अक्सर "सत्य के स्रोत" की नकल का कारण बनता है, यानी वास्तविक डेटा है। ऐसा इसलिए है क्योंकि getInitialState केवल तभी लगाया जाता है जब घटक पहले बनाया गया हो।

जब भी संभव हो, ऑन-द-फ्लाई पर मूल्यों की गणना करें ताकि यह सुनिश्चित किया जा सके कि वे बाद में सिंक से बाहर नहीं निकलते हैं और रखरखाव की समस्या का कारण बनते हैं।

मूल रूप से, जब भी आप माता-पिता की props एक बच्चे की state विधि प्रस्तुत करने के लिए आवंटित हमेशा प्रोप अद्यतन पर नहीं बुलाया जाता है। componentWillReceiveProps विधि का उपयोग करके आपको मैन्युअल रूप से इसे आमंत्रित करना होगा।

componentWillReceiveProps(nextProps) { 
    // You don't have to do this check first, but it can help prevent an unneeded render 
    if (nextProps.startTime !== this.state.startTime) { 
    this.setState({ startTime: nextProps.startTime }); 
    } 
}