无法使用mapStateToProps读取null的属性'props'

时间:2018-01-11 04:36:25

标签: reactjs properties null redux native

您好我正在使用redux和redux saga做出本地反应,目前我需要通过调用ajax将cities数组加载到选择器中,这是我的代码。

内部渲染方法:

render() { 
if (this.props.loaded) {
  // 
}

return (
  <ContainerScroll>
    <StatusBar translucent={false} barStyle="light-content" />
    <Section style={{ height: deviceHeightOneThird }}>
      <LabelScreenHeader text={I18n.t('signupEmailHeaderLabel')} />
    </Section>

    <Section>
      <TextInputDefault
        label={I18n.t('signupEmailInputLabel')}
        keyboardType="email-address"
        onChangeText={email => this.setState({ email })}
        value={this.state.email}
        placeholder={I18n.t('signupEmailInputPlaceHolder')}
      />
      <TextInputDefault
        label={I18n.t('signupPhoneNumberInputLabel')}
        keyboardType="numeric"
        onChangeText={phoneNumber => this.setState({ phoneNumber })}
        value={this.state.phoneNumber}
        placeholder={I18n.t('signupPhoneNumberInputPlaceHolder')}
      />
      <TextInputDefault
        label={I18n.t('signupNameInputLabel')}
        keyboardType="default"
        onChangeText={name => this.setState({ name })}
        value={this.state.name}
        placeholder={I18n.t('signupNameInputPlaceHolder')}
      />
      <TextInputDefault
        label={I18n.t('signupPasswordInputLabel')}
        keyboardType="default"
        onChangeText={password => this.setState({ password })}
        value={this.state.password}
        secureTextEntry
        placeholder={I18n.t('signupPasswordInputPlaceHolder')}
      />
      <PickerDefault
        iosHeader={I18n.t('signupCityDropdownDefaultValue')}
        selectedValue={this.state.cityPickerValue}
        onValueChange={city => this.setState({ cityPickerValue: city })}
      >
        {console.log('this.props ---- ', this.props.cities) /* this is where error pop up when calling cities*/}
        <Picker.Item label={I18n.t('signupCityDropdownDefaultValue')} value="default" />

        {this.displayCities}
      </PickerDefault>

      <Button
        buttonText={I18n.t('signupEmailButtonText')}
        onPress={this.handleSignUp}
        wrapperStyleProp={{
          marginTop: 30,
        }}
      />
    </Section>
  </ContainerScroll>
);
}

这是带有connect的mapstatetoprops方法:

// here in mapstatetoprops method all cities are fetched successfully
const mapStateToProps = state => ({
  cities: state.commonDataReducer.cities,
  loaded: state.commonDataReducer.loaded,
});

 export default connect(mapStateToProps)(SignupEmail); 
当我在jsx标签中调用this.props时出现

错误。例如,这一行

 {console.log('this.props ---- ', this.props.cities) 

我有点自学,与redux和redux传奇做出反应。如果这是一个新手的话,请耐心等待。

感谢所有

0 个答案:

没有答案