Question

我已经创建了一个注册页面，并且在创建用户帐户时尝试连接一个加载代码。

我遇到一个问题，即每当屏幕加载时都会执行mapStateToProps（），这意味着由于状态未定义，我正在映射的任何值都会出错。我的化简器或操作均未执行以导致mapStateToProps（）运行。我是否在屏幕上设置了某些内容来使它执行，我完全理解我的状态确实未定义，但是为什么mapStateToProps甚至在初始加载时运行？

.......
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);

Answer 1

React Redux尝试通过对shouldComponentUpdate中的传入道具进行浅相等性引用检查来提高性能，但您需要记住在mapStateToProps将在初始加载中运行之前，初始渲染未调用shouldComponentUpdate方法

停止在屏幕加载时执行MapStateToProps

1 个答案: