जब मेरे पास "ड्राबटन" नामक एक बटन वर्ग होता है, जिसमें यह प्रस्तुत होता है

render() {
    return(
        <Button
            onClick={this.props.toggleDraw.bind(this)}
            style={{
                backgroundColor: this.props.drawMode ? 'red' : 'blue'
            }}
        >
            Draw
        </Button>
    );
}

और मूल App.js में राज्य परिभाषित हो जाता है

state = {
        drawMode: false
}

और एक हैंडलर फ़ंक्शन है

toggleDraw = (e) => {
    console.log('App.js drawMode:' + this.state.drawMode);
    this.setState({
        drawMode: !this.state.drawMode
    });
    console.log('App.js drawMode:' + this.state.drawMode);
}

और अंत में बटन:

render() {
  return (
    <div className="App">
        <DrawButton 
            toggleDraw={this.toggleDraw} 
            drawMode={this.state.drawMode}
        />
    </div>
  );
}

राज्य ठीक से अद्यतन नहीं होता है। यह निम्नलिखित आउटपुट करता है:

सबसे पहले बटन पर क्लिक करें

App.js drawMode:false
App.js:27
App.js drawMode:false
App.js:31

सेटस्टेट चलने से पहले, ड्रॉमोड सेटस्टेट चलने के बाद झूठा है, ड्रॉमोड अभी भी झूठा है।

लेकिन बटन को अभी भी लाल रंग का बैकग्राउंड मिलता है।

बटन पर दूसरा क्लिक करें:

App.js drawMode:true
App.js:22
App.js drawMode:true
App.js:26

लेकिन बटन फिर से नीला है राज्य में ड्रामोड को तिरस्कृत करने के लिए सत्य पर सेट है।

यह विसंगति क्यों हो रही है?

-2
user6329530 28 अक्टूबर 2019, 04:33

1 उत्तर

सबसे बढ़िया उत्तर

सबसे पहले, आपके bind का गलत इस्तेमाल किया गया था, आपके DrawButton ऑनक्लिक हैंडलर में, बस this.props.toggleDraw को कॉल करें। यह कोड : this.props.toggleDraw.bind(this) App.js फ़ाइल के कंस्ट्रक्टर में होना चाहिए।

दूसरे, सेटिंग के बाद राज्य के मूल्य की जांच करने के लिए console.log का उपयोग न करें, क्योंकि setState फ़ंक्शन एसिंक्रोनस रूप से चलता है, सेटिंग के बाद मान की जांच करने के लिए setState कॉलबैक का उपयोग करें:

toggleDraw = (e) => {
    console.log('App.js drawMode:' + this.state.drawMode);
    this.setState(
        { drawMode: !this.state.drawMode },
        () => console.log('App.js drawMode:' + this.state.drawMode)
    ),
}
1
thelonglqd 28 अक्टूबर 2019, 01:48