"किसी मौजूदा राज्य संक्रमण के दौरान अद्यतन नहीं कर सकते" में त्रुटि

Question

मैं इस के 15 ट्यूटोरियल ReactJS चरण करने के लिए कोशिश कर रहा हूँ प्रतिक्रिया: React.js Introduction For People Who Know Just Enough jQuery To Get By

लेखक की सिफारिश के बाद:

overflowAlert: function() { 
    if (this.remainingCharacters() < 0) { 
    return (
     <div className="alert alert-warning"> 
     <strong>Oops! Too Long:</strong> 
     </div> 
    ); 
    } else { 
    return ""; 
    } 
}, 

render() { 
    ... 

    { this.overflowAlert() } 

    ... 
} 

मैं कर रहा करने की कोशिश की निम्नलिखित (जो मेरे लिए ठीक लग रहा है):

// initialized "warnText" inside "getInitialState" 


overflowAlert: function() { 
    if (this.remainingCharacters() < 0) { 
    this.setState({ warnText: "Oops! Too Long:" }); 
    } else { 
    this.setState({ warnText: "" }); 
    } 
}, 

render() { 
    ... 

    { this.overflowAlert() } 
    <div>{this.state.warnText}</div> 

    ... 
} 

और मैं क्रोम देव उपकरण में कंसोल में निम्न त्रुटि प्राप्त:

मौजूदा राज्य संक्रमण (जैसे render या किसी अन्य घटक के कन्स्ट्रक्टर के भीतर) अपडेट नहीं किया जा सकता है। प्रस्तुत करने के तरीके प्रोप और राज्य का एक शुद्ध कार्य होना चाहिए; कन्स्ट्रक्टर साइड इफेक्ट्स एंटी-पैटर्न हैं, लेकिन उन्हें componentWillMount पर ले जाया जा सकता है।

यहां एक JSbin demo है। मेरा समाधान क्यों काम नहीं करेगा और इस त्रुटि का क्या अर्थ है?

Answer 1

आपका समाधान काम करता है क्योंकि यह तर्कसंगत रूप से समझ में नहीं आता है। आपको जो त्रुटि मिलती है वह थोड़ी अस्पष्ट हो सकती है, इसलिए मुझे इसे तोड़ने दें। पहली पंक्ति बताती है:

किसी मौजूदा राज्य संक्रमण (जैसे रेंडर या किसी अन्य घटक के कन्स्ट्रक्टर के भीतर) के दौरान अपडेट नहीं किया जा सकता है।

जब भी एक प्रतिक्रिया घटक की स्थिति अपडेट की जाती है, तो घटक को डीओएम को फिर से प्रस्तुत किया जाता है। इस मामले में, एक त्रुटि है क्योंकि आप render के अंदर overflowAlert पर कॉल करने का प्रयास कर रहे हैं, जो setState पर कॉल करता है। इसका मतलब है कि आप रेंडर में राज्य को अपडेट करने का प्रयास कर रहे हैं, जिसमें कॉल रेंडर और overflowAlert कॉल होगा और राज्य अपडेट करें और दोबारा रेंडर करें, इत्यादि। अनंत लूप की ओर अग्रसर करें। त्रुटि आपको बता रही है कि आप राज्य को अद्यतन करने के परिणामस्वरूप राज्य को अद्यतन करने की कोशिश कर रहे हैं, जिससे लूप होता है। यही कारण है कि इसकी अनुमति नहीं है।

इसके बजाय, एक और दृष्टिकोण लें और याद रखें कि आप क्या करने की कोशिश कर रहे हैं। क्या आप पाठ इनपुट करते समय उपयोगकर्ता को चेतावनी देने का प्रयास कर रहे हैं? यदि ऐसा है, तो इनपुट के इवेंट हैंडलर के रूप में overflowAlert सेट करें। इस तरह, एक इनपुट घटना होने पर राज्य अपडेट किया जाएगा, और घटक फिर से प्रस्तुत किया जाएगा।

Answer 2

रेंडर विधि में घटक से संबंधित कोई भी कार्य करने के बजाय इसे घटक के अद्यतन के बाद करें, इस मामले में स्पलैश स्क्रीन से दूसरी स्क्रीन पर जाने के मामले में घटकडिडमाउंट विधि कॉल के बाद ही किया जाता है।

import React, { Component } from 'react'; 
import { 
StyleSheet, 
Text, 
View, 
Button, 
Image, 
} from 'react-native'; 


let timeoutid; 

export default class Splash extends Component { 

static navigationOptions = { 
navbarHidden: true, 
tabBarHidden: true, 
}; 

constructor(props) { 
super(props) 
this.state = { navigatenow: false }; 

} 
componentDidMount() { 
timeoutid=setTimeout(() => { 
    this.setState({ navigatenow: true }); 
}, 5000); 
} 
componentWillUnmount(){ 

clearTimeout(timeoutid); 
} 
componentDidUpdate(){ 
const { navigate,goBack } = this.props.navigation; 

if (this.state.navigatenow == true) { 

    navigate('Main'); 
} 
} 
render() { 

//instead of writing this code in render write this code in 
componenetDidUdpate method 
/* const { navigate,goBack } = this.props.navigation; 

if (this.state.navigatenow == true) { 

    navigate('Main'); 
}*/ 

return (

    <Image style={{ 
    flex: 1, width: null, 
    height: null, 
    resizeMode: 'cover' 
    }} source={require('./login.png')}> 
    </Image> 
); 

    } 
} 

Answer 3

सुनिश्चित करें कि आप उचित अभिव्यक्ति का उपयोग कर रहे हैं। उदाहरण के लिए, का उपयोग करते हुए:

<View onPress={this.props.navigation.navigate('Page1')} /> 

या

<View onPress={() => { 
    this.props.navigation.navigate('Page1') 
}} /> 

दो पिछले ऊपर हैं समारोह अभिव्यक्ति के साथ अलग है, पहले एक नहीं है।सुनिश्चित करें कि आप फ़ंक्शन ऑब्जेक्ट () => {}