React native 停止在屏幕加载时执行MapStateTrops

我已经创建了一个注册页面，我正在尝试在创建用户帐户的同时连接一个加载的ticker

我遇到了一个问题，即每当屏幕加载时，都会执行MapStateTops（），这意味着映射的任何值都会出错，因为状态未定义。我没有执行任何还原程序或操作来导致MapStateTops（）运行。如果我在屏幕中设置了一些东西来执行此操作，我完全理解我的状态确实是未定义的，但是为什么MapStateTops甚至在初始加载时运行

.......
interface State {
  name: string,
  email: string;
  mobileNo: string;
  password: string;
  passwordConf: string;
  nameTouched: boolean;
  emailTouched: boolean;
  mobileNoTouched: boolean;
  passwordTouched: boolean;
  passwordConfTouched: boolean;
  loading: boolean;
}
class RegisterScreen extends React.Component<{
  navigation: any;
  register: Function}, State> {

  emailInputRef = React.createRef<FormTextInput>();
  mobileNoInputRef = React.createRef<FormTextInput>();
  passwordInputRef = React.createRef<FormTextInput>();
  passwordConfInputRef = React.createRef<FormTextInput>();

  readonly state: State = {
    name: "",
    email: "",
    password: "",
    mobileNo:"",
    passwordConf: "",
    emailTouched: false,
    passwordTouched: false,
    nameTouched: false,
    mobileNoTouched: false,
    passwordConfTouched: false,
    loading: false
  };

  handleNameChange = (name: string) => {
    this.setState({ name: name });
  };

  handleEmailChange = (email: string) => {
    this.setState({ email: email });
  };

  handleMobileNoChange = (mobileNo: string) => {
    this.setState({ mobileNo: mobileNo });
  };

  handlePasswordChange = (password: string) => {
    this.setState({ password: password });
  };

  handlePasswordConfChange = (passwordConf: string) => {
    this.setState({ passwordConf: passwordConf });
  };

  handleNameSubmitPress = () => {
    if (this.emailInputRef.current) {
      this.emailInputRef.current.focus();
    }
  };

  handleEmailSubmitPress = () => {
    if (this.mobileNoInputRef.current) {
      this.mobileNoInputRef.current.focus();
    }
  };

  handleMobileNoSubmitPress = () => {
    if (this.passwordInputRef.current) {
      this.passwordInputRef.current.focus();
    }
  };

  handlePasswordSubmitPress = () => {
    if (this.passwordConfInputRef.current) {
      this.passwordConfInputRef.current.focus();
    }
  };

  handleNameBlur = () => {
  this.setState({ nameTouched: true });
  };

  handleEmailBlur = () => {
    this.setState({ emailTouched: true });
  };

  handleMobileNoBlur = () => {
    this.setState({ mobileNoTouched: true });
  };

  handlePasswordBlur = () => {
    this.setState({ passwordTouched: true });
  };

  handlePasswordConfBlur = () => {
    this.setState({ passwordConfTouched: true });
  };

  render() {
    const {
      name,
      email,
      password,
      mobileNo,
      passwordConf,
      emailTouched,
      passwordTouched,
      nameTouched,
      mobileNoTouched,
      passwordConfTouched,
    } = this.state;
    const nameError =
    !name && nameTouched
      ? strings.NAME_REQUIRED
      : undefined;
    const emailError =
      !email && emailTouched
        ? strings.EMAIL_REQUIRED
        : undefined;
    const mobileError =
    !mobileNo && mobileNoTouched
      ? strings.MOBILE_REQUIRED
      : undefined;
    const passwordError =
      !password && passwordTouched
        ? strings.PASSWORD_REQUIRED
        : undefined;
    const passwordConfError =
      !passwordConf && passwordConfTouched && (password === passwordConf)
        ? strings.PASSWORD_CONF_REQUIRED
        : undefined;
    return (
      <KeyboardAvoidingView
        style={styles.container}
        behavior="padding"
      >
        <Image source={imagePath} style={styles.logo} />
        <View style={styles.form}>
        {/* Name */}
        <FormTextInput
            keyboardType={"default"}
            value={this.state.name}
            onChangeText={this.handleNameChange}
            onSubmitEditing={this.handleNameSubmitPress}
            placeholder={strings.NAME_PLACEHOLDER}
            autoCorrect={false}
            returnKeyType="next"
            onBlur={this.handleNameBlur}
            error={nameError}
          />
          {/* Email */}
          <FormTextInput
            keyboardType={"email-address"}
            ref={this.emailInputRef}
            value={this.state.email}
            onChangeText={this.handleEmailChange}
            onSubmitEditing={this.handleEmailSubmitPress}
            placeholder={strings.EMAIL_PLACEHOLDER}
            autoCorrect={false}
            returnKeyType="next"
            onBlur={this.handleEmailBlur}
            error={emailError}
          />
          {/* MobileNo */}
          <FormTextInput
            keyboardType={"numeric"}
            ref={this.mobileNoInputRef}
            value={this.state.mobileNo}
            onChangeText={this.handleMobileNoChange}
            onSubmitEditing={this.handleMobileNoSubmitPress}
            placeholder={strings.MOBILE_PLACEHOLDER}
            autoCorrect={false}
            returnKeyType="next"
            onBlur={this.handleMobileNoBlur}
            error={mobileError}
          />
          {/* Password */}
          <FormTextInput
            keyboardType={"default"}
            ref={this.passwordInputRef}
            value={this.state.password}
            onChangeText={this.handlePasswordChange}
            onSubmitEditing={this.handlePasswordSubmitPress}
            placeholder={strings.PASSWORD_PLACEHOLDER}
            secureTextEntry={true}
            returnKeyType="done"
            onBlur={this.handlePasswordBlur}
            error={passwordError}
          />
          {/* Password Conf */}
          <FormTextInput
            keyboardType={"default"}        
            ref={this.passwordConfInputRef}
            value={this.state.passwordConf}
            onChangeText={this.handlePasswordConfChange}
            placeholder={strings.PASSWORD_CONF_PLACEHOLDER}
            secureTextEntry={true}
            returnKeyType="done"
            onBlur={this.handlePasswordConfBlur}
            error={passwordConfError}
          />
          <ActivityIndicator animating={true} />
          <Button
            title="Register"
            onPress={() => this.props.register(
                name,
                email,
                mobileNo,
                password)}
            disabled={!email || !password || !name || !password || !passwordConf}
          />
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(this.state);
 //On screen load this executes with state = undefined, not sure what's causing it to fire
  return {
   loading : state.creatingUser
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({register: register}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(RegisterScreen);

。。。。。。。
界面状态{
名称：string，
电子邮件：字符串；
mobileNo：字符串；
密码：字符串；
passwordConf:string；
名称：布尔；
参数：布尔；
mobile：布尔；
密码：布尔；
密码：布尔；
加载：布尔；
}
类注册表屏幕扩展React.Component{
emailInputRef=React.createRef（）；
mobileNoInputRef=React.createRef（）；
passwordInputRef=React.createRef（）；
passwordConfInputRef=React.createRef（）；
只读状态：状态={
姓名：“，
电邮：“，
密码：“”，
美孚利诺：“，
passwordConf:“”，
错,，
密码：false，
名字：错，
莫比尔：错，
密码：false，
加载：错误
};
handleNameChange=（名称：字符串）=>{
this.setState（{name:name}）；
};
handleEmailChange=（电子邮件：字符串）=>{
this.setState（{email:email}）；
};
handleMobileNoChange=（mobileNo:string）=>{
this.setState（{mobileNo:mobileNo}）；
};
handlePasswordChange=（密码：字符串）=>{
this.setState（{password:password}）；
};
handlePasswordConfChange=（passwordConf:string）=>{
this.setState（{passwordConf:passwordConf}）；
};
handleNameSubmitPress=（）=>{
if（this.emailInputRef.current）{
this.emailInputRef.current.focus（）；
}
};
handleEmailSubmitPress=（）=>{
if（此.mobileInputRef.current）{
this.mobileNoInputRef.current.focus（）；
}
};
handleMobileNoSubmitPress=（）=>{
if（this.passwordInputRef.current）{
this.passwordInputRef.current.focus（）；
}
};
handlePasswordSubmitPress=（）=>{
if（this.passwordConfInputRef.current）{
this.passwordConfInputRef.current.focus（）；
}
};
handleNameBlur=（）=>{
this.setState（{namepothed:true}）；
};
handleEmailBlur=（）=>{
this.setState（{emailTouched:true}）；
};
handleMobileNoBlur=（）=>{
this.setState（{mobileNoTouched:true}）；
};
handlePasswordBlur=（）=>{
this.setState（{passwordtoucted:true}）；
};
handlePasswordConfBlur=（）=>{
this.setState（{passwordconftoucted:true}）；
};
render（）{
常数{
名称
电子邮件，
密码，
美孚利诺，
passwordConf，
我很感动，
密码，
感动的名字，
莫比尔，
密码，
}=本州；
常量名称错误=
！name&&name
？strings.NAME_必填项
：未定义；
常量电子邮件错误=
！email&&emailtouch
？strings.EMAIL_必需
：未定义；
警察机动犯=
！mobileNo&&mobileNo
？strings.MOBILE_必需
：未定义；
常量密码错误=
！password&&passwordTouched
？strings.PASSWORD_必需
：未定义；
常量密码协商器=
！passwordConf&&passwordConf&&（password==passwordConf）
？strings.PASSWORD\u CONF\u必需
：未定义；
返回(
{/*名称*/}
{/*电子邮件*/}
{/*MobileNo*/}
{/*密码*/}
{/*密码配置*/}
这是道具登记册(
名称
电子邮件，
美孚利诺，
密码）}
禁用={！电子邮件| |！密码| |！名称| |！密码| |！密码配置}
/>
);
}
}
常量mapStateToProps=（状态）=>{
console.log（this.state）；
//在屏幕加载时，它以state=undefined执行，不确定是什么导致它触发
返回{
加载：state.creatingUser
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{register:register}，dispatch）；
}
导出默认连接（mapStateToProps、mapDispatchToProps）（注册表屏幕）；

React-Redux试图通过在shouldComponentUpdate中对传入的道具进行浅层相等参考检查来提高性能，但您需要记住这一点 不为初始呈现调用shouldComponentUpdate方法。Fore MapStateTrops将在初始加载中运行

MapStateTrops应在页面加载上运行，这是默认行为，非常有用。这就是在导航时，如何在页面/组件之间为登录用户维护适当的UI（例如）。禁用该行为不仅可能是一种反模式，而且会产生意想不到的副作用。我相信有一种方法可以在不破坏MapStateTops的预期行为的情况下获得您想要的。。。但我有点不清楚当前的行为vrs期望的行为