मैं देशी प्रतिक्रिया करने के लिए नया हूं, और मैं इसका उपयोग अब एक ऐप बनाने के लिए करता हूं। मुझे आज दो प्रश्न मिले, अगर कोई इन्हें समझने में मेरी मदद कर सकता है, तो यह बहुत मददगार होगा और इसकी सराहना करेगा।

इस ऐप में, मैं react native + Expo + redux + react-native-elements(एक कॉम्पोनेंट लिब) + react-native-debugger (डीबग रिएक्ट-नेटिव और रिडक्स) का उपयोग करता हूं।

पहला प्रश्न (समाधान!):

मेरे Auth.js में, मैं एक बटन रेंडर करना चाहता हूं , बटन की स्ट्रिंग राज्य के किसी एक स्लाइस पर निर्भर करती है।

class Auth extends Component{
  constructor(props){
    super(props);
  }

  // Why this not work???
  // renderBtn(){
  //   btnString = this.props.isLoginPage?"Log In":"Sign Up";
  //   return(
  //     <Button
  //         title={btnString}
  //         big
  //         backgroundColor="#64B5F6"
  //         onPress={this.props.onAuth}
  //       />
  //   )
  // }

  //this works well
  renderBtn(){
    if (this.props.isLoginPage) {
      return(
        <Button
          title="Log In"
          big
          backgroundColor="#64B5F6"
          onPress={this.props.onAuth}
        />
      );
    }

      return(
        <Button
          title="Sign Up"
          big
          backgroundColor="#64B5F6"
          onPress={this.props.onAuth}
        />
      );
  }

...

  render(){
    return(
      <View>
      ...

        {this.renderBtn()}

      ...

      </View>

    )
  }
}
//map isLoginPage from state to props
const mapStateToProps = ({auth}) => {
  const {emailErrorMsg,passwordErrorMsg,email,password,isLoginPage,isLoading} = auth;
  return {emailErrorMsg,passwordErrorMsg,email,password,isLoginPage,isLoading};
}

export default connect(mapStateToProps,{
  onPasswordChanged,
  onEmailChanged,
  onAuth,
  onSwitchAuthType
})(Auth);

ऊपर के रूप में, मैं यह निर्धारित करने के लिए this.props.isLoginPage का उपयोग करना चाहता हूं कि कौन सी स्ट्रिंग है। "isLoginPage" राज्य का एक टुकड़ा है जो घटक के प्रॉप्स को मैप करने के लिए react-redux का उपयोग करता है।

और जब मैं isLoginPage को उलटने के लिए एक बटन पर क्लिक करता हूं, और डीबगर दिखाता है कि यह बदल गया है, लेकिन जिस फ़ंक्शन renderBtn() पर मैंने टिप्पणी की है वह काम नहीं कर रहा है, यह सिर्फ कोई प्रतिक्रिया नहीं है, नीचे renderBtn() अच्छी तरह से काम करता है।

बटन घटक react-native-elements से है।

मैं जानना चाहता हूं कि ऐसा क्यों हुआ और यदि कोई दस्तावेज है तो बहुत मददगार होगा।

द सेंकॉन्ड प्रश्न:

AuthReducer.js में (Auth.js द्वारा उपयोग करें) ऊपर)। मैं isLoginPage को उलटना चाहता हूं

import {PASSWORD_CHANGE,EMAIL_CHANGE,SWITCH_AUTH_TYPE,AUTH_START} from '../Type';

const INIT_STATE = {
  isLoginPage:false,

  isLoading:false,
  email:'',
  password:'',
  emailErrorMsg:'',
  passwordErrorMsg:'',
};


export default (state = INIT_STATE, action)=>{
  switch(action.type){
    case EMAIL_CHANGE:
      return {...state, email:action.payload};
    case PASSWORD_CHANGE:
      return {...state, password:action.payload};

    case SWITCH_AUTH_TYPE:
      //Why this not work???
      //return {...state, isLoginPage:!state.isLoginPage}
      const newIsLogin = !state.isLoginPage;
      return {...state,isLoginPage:newIsLogin};

    case AUTH_START:
      return {...state,isLoading:true};
    default:
      return state;
  }
}

मैंने काम नहीं कर रहे कोड पर टिप्पणी की (isLoginPage मान react-native-debugger द्वारा नहीं बदला गया है), नीचे दिया गया कोड अच्छी तरह से काम कर रहा है। बिल्कुल वैसा ही लगता है। मैं इसे समझ नहीं पा रहा हूं, मेरे पास ES6 के साथ कोई कमी है?

0
Ezio Shiki 20 जुलाई 2017, 11:54
btnString ? यह let btnString होना चाहिए
 – 
Jigar Shah
20 जुलाई 2017, 12:02
ओह, मैं देखता हूँ, क्या बेवकूफी भरी गलती है! आपका बहुत बहुत धन्यवाद।
 – 
Ezio Shiki
20 जुलाई 2017, 12:08
और प्रश्न 2 भी हल हो गया, मुझे नहीं पता कि क्या हुआ, यह अभी गायब हो गया, हो सकता है कि निर्माण उपकरण में कुछ समस्या हो?
 – 
Ezio Shiki
20 जुलाई 2017, 12:14
शायद... लेकिन सुनकर खुशी हुई
 – 
Jigar Shah
20 जुलाई 2017, 12:15
क्या आप एक उत्तर पोस्ट कर सकते हैं ताकि मैं इस प्रश्न को बंद करने के लिए आपके उत्तर को स्वीकार कर सकूं
 – 
Ezio Shiki
20 जुलाई 2017, 12:17

1 उत्तर

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

आप अभी-अभी वैरिएबल घोषित करने से चूक गए हैं, यह होना चाहिए

let btnString = this.props.isLoginPage?"Log In":"Sign Up";

ESLint के साथ यह होना चाहिए:

let btnString = this.props.isLoginPage ? 'Log In' : 'Sign Up';
1
Jigar Shah 20 जुलाई 2017, 12:18