2017-03-04 12 views
9

ठीक है, मैं कोशिश करूँगा और इसे जल्दी कर दूंगा क्योंकि यह एक आसान फिक्स होना चाहिए ...क्यों सेटस्टेट विधि को कॉल करना राज्य को तुरंत म्यूट नहीं करता है?

मैंने इसी तरह के प्रश्नों का एक समूह पढ़ा है, और उत्तर काफी स्पष्ट प्रतीत होता है। मुझे पहले कभी भी देखना नहीं होगा! लेकिन ... मुझे एक त्रुटि है कि मैं समझ नहीं सकता कि कैसे ठीक किया जाए या क्यों हो रहा है।

के रूप में इस प्रकार है:

class NightlifeTypes extends Component { 
constructor(props) { 
    super(props); 

    this.state = { 
     barClubLounge: false, 
     seeTheTown: true, 
     eventsEntertainment: true, 
     familyFriendlyOnly: false 
    } 
    this.handleOnChange = this.handleOnChange.bind(this); 
} 

handleOnChange = (event) => { 
    if(event.target.className == "barClubLounge") { 
     this.setState({barClubLounge: event.target.checked}); 
     console.log(event.target.checked) 
     console.log(this.state.barClubLounge) 
    } 
} 

render() { 
    return (
     <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/> 
    ) 
} 

अधिक कोड इस चारों ओर से घेरे लेकिन यह वह जगह है जहाँ मेरी समस्या है। काम करना चाहिए, है ना?

मैं भी इस की कोशिश की है:

handleOnChange = (event) => { 
if(event.target.className == "barClubLounge") { 
    this.setState({barClubLounge: !this.state.barClubLounge}); 
    console.log(event.target.checked) 
    console.log(this.state.barClubLounge) 
} 

तो मैं उन दो console.log() की है, दोनों एक ही होना चाहिए। मैं सचमुच राज्य को event.target.checked के समान रेखा में समान रूप से सेट कर रहा हूं!

लेकिन यह हमेशा इसके विपरीत के विपरीत देता है।

जब मैं !this.state.barClubLounge का उपयोग करता हूं तो वही जाता है; यदि यह गलत शुरू होता है, तो मेरे पहले क्लिक पर यह झूठ रहता है, भले ही चेकबॉक्स चेक किया गया हो या नहीं, राज्य से अलग है !!

यह एक पागल विरोधाभास है और मुझे नहीं पता कि क्या हो रहा है, कृपया मदद करें!

उत्तर

19

कारण, setState अतुल्यकालिक है आप अद्यतन state मूल्य उम्मीद नहीं कर सकते सिर्फ setState के बाद, आप मूल्य एक callback विधि का उपयोग जाँच करना चाहते हैं। कॉलबैक के रूप में एक विधि पास करें जिसे setState के बाद अपना कार्य पूरा कर लिया जाएगा।

क्यों सेटस्टेट असीमित है?

ऐसा इसलिए है क्योंकि setStatestate बदलता है और फिर प्रतिपादन का कारण बनता है। यह एक महंगा ऑपरेशन हो सकता है और इसे synchronous ब्राउज़र को उत्तरदायी छोड़ सकता है। इस प्रकार setState कॉल asynchronous हैं और बेहतर UI अनुभव और प्रदर्शन के लिए बैच किए गए हैं।

से Doc:

setState() तुरंत this.state उत्परिवर्तित नहीं करता, लेकिन एक लंबित स्थिति संक्रमण पैदा करता है। इस विधि को कॉल करने के बाद this.state तक पहुंचने से संभावित रूप से मौजूदा मान वापस आ सकता है। सेटस्टेट पर कॉल के सिंक्रोनस ऑपरेशन की कोई गारंटी नहीं है और कॉल प्रदर्शन लाभ के लिए बैच किए जा सकते हैं।setState साथ

का उपयोग कॉलबैक विधि:

सिर्फ setState के बाद अद्यतन state मान की जाँच करने के लिए, इस तरह एक कॉलबैक विधि का उपयोग करें:

setState({ key: value },() => { 
    console.log('updated state value', this.state.key) 
}) 

चेक करें:

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

 
     this.state = { 
 
     barClubLounge: false, 
 
     seeTheTown: true, 
 
     eventsEntertainment: true, 
 
     familyFriendlyOnly: false 
 
     } 
 
     this.handleOnChange = this.handleOnChange.bind(this); 
 
    } 
 

 
    handleOnChange = (event) => { 
 
     let value = event.target.checked; 
 

 
     if(event.target.className == "barClubLounge") { 
 

 
     this.setState({ barClubLounge: value},() => { //here 
 
      console.log(value); 
 
      console.log(this.state.barClubLounge); 
 
      //both will print same value 
 
     });   
 

 
     } 
 
    } 
 

 
    render() { 
 
     return (
 
      <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<NightlifeTypes/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

0

यह प्रदर्शन विचारों के कारण डिज़ाइन है। सेटस्टेट इन रिएक्ट एक फंक्शन गारंटी देने वाला घटक है, जो एक महंगा सीपीयू प्रक्रिया है। इस प्रकार, इसके डिजाइनर एक से अधिक प्रतिपादन कार्यों को इकट्ठा करके अनुकूलित करना चाहते थे, इसलिए सेटस्टेट असीमित है।

संबंधित मुद्दे