nextProps हमेशा componentWillReceiveProps में this.props के समान हैं, भले ही रंगमंच की सामग्री

Question

बदल गया है मुझे लगता है कि उपयोगकर्ता के लिए कुल मूल्य renders मेरी प्रतिक्रिया अनुप्रयोग में एक घटक है। जब वह मूल्य बढ़ जाता है, तो मैं शोर खेलना चाहता हूं। मैंने सोचा कि उस घटक के भीतर जो कुल दिखाता है वह उस शोर को खेलने के लिए एक अच्छी जगह होगी।

तो मैं घटक के लिए एक componentWillReceiveProps विधि जोड़ा, और उस में, मैं दो योग की गणना: totalthis.props से की जाती है और nextTotalnextProps से की जाती है।

मेरे आश्चर्य करने के लिए, यहाँ तक कि जब मान बदलते हैं, और कुल योग परिवर्तन, nextTotal और totalहमेशा ही हैं। तो सशर्त है कि जब मैं कुल हो जाता है तो मैं फायरिंग करना चाहता हूं।

मैं एक सरल, एकल घटक उदाहरण ऊपर लिखा था। JSfiddle।

var Hello = React.createClass({ 
    componentWillReceiveProps: function(nextProps) { 
    var total = 0; 
    this.props.vals.forEach(val => total+= val); 

    var nextTotal = 0; 
    nextProps.vals.forEach(val => nextTotal+= val); 

     console.log(total, nextTotal) 

    if (nextTotal > total) { 
      //never runs 
      console.log('moving up'); 
     } 
    }, 
    render: function() { 
    var total = 0; 
    vals.forEach(val => total+= val) 
    return (
     <div>{total}</div> 
    ) 
    } 
}); 

var vals = [1, 21, 452, 123]; 

setInterval(renderReact, 1000) 

function renderReact() { 
    vals.push(10); 
    ReactDOM.render(
    <Hello 
     vals={vals} 
    />, 
    document.getElementById('container') 
); 
} 

आप देख सकते हैं, हर दूसरे यह कहते हैं 10 vals सरणी है, जो कुल चाल 1. द्वारा मतलब है लेकिन अगर आप कंसोल खोलें, आप देख सकते हैं कि total और nextTotal हमेशा एक ही कर रहे हैं, और moving up कभी लॉग नहीं किया गया है।

मैं स्पष्ट रूप से कुछ गलतफहमी कर रहा हूँ, और अगर किसी को समझा सकता है कि मेरी गलतफहमी है, और मैं कैसे प्राप्त करना चाहिए कि मैं क्या करने के लिए जा रहा हूँ, कि शानदार होगा। बजाय एक नया संपत्ति के साथ बुला से -

Answer 1

टिप्पणियां (@PitaJ द्वारा) में बताया गया है, आपकी समस्या यह है कि आप एक सरणी में पहली बार गुजर रहे हैं, और उसके बाद सरणी फेरबदल कर रहा है। आप उस वस्तु में पहुंच गए हैं जिस पर आपका घटक अपनी मौजूदा संपत्ति के रूप में संदर्भ रख रहा है और इसकी सामग्री बदल दी है।

अपने बेला में, इस प्रयास करें:

function renderReact() { 
    vals.push(10); 
    ReactDOM.render(
    <Hello 
     vals={vals.concat([])} 
    />, 
    document.getElementById('container') 
); 
} 

हर बार अपने आधार के रूप में में सरणी की एक प्रति पासिंग, आप उन्हें समुचित अलग देखेंगे।

यह वास्तव में प्रतिक्रिया का उपयोग करने में त्रुटि के एक गैर तुच्छ स्रोत है, और इसके साथ भी जब का उपयोग कर Redux अगर reducers ध्यान से लिखा नहीं कर रहे हैं पैदा कर सकते हैं। अपरिवर्तनीय डेटा संरचनाओं का उपयोग करना इससे बचने का एक तरीका है।