React Native - ошибка проверки формы Redux не отображается

Question

Я новичок, чтобы реагировать на родных. Я хочу показать подтверждение при отправке и изменении текста. Вот мой код, пожалуйста, дайте мне знать, что здесь не так.

импортировать React, { Component } из 'response'; import { View } из'act-native'; import { Container, Item, Input, Header, Body, Content, Title, Button, Text, Label, Picker } из "родной базы"; import { Field, reduxForm } из 'redux-формы'; импортировать FormStyle из "./FormStyle" импортировать { connect } из "act-redux"импортировать CountryData из"../Data/CountryData "

const validate = values => {
  const error = {};

  if (!values.fName) {
    error.fName = "Enter First Name";
  }
  return error;
};

const nextHandle = values => {
  console.log(values);
}

class FirstForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
      countries: [],
      country: "0"
    };
    this.renderInput = this.renderInput.bind(this);

  }
  async componentWillMount() {

    this.setState({ isReady: true });
  }

  componentDidMount() {
    let countries = this.state.countries;
    countries = CountryData;
    this.props.add(countries);
  }
  renderInput({ input, label, multiline, placeholder, type, meta: { touched, error, warning } }) {
    var hasError = false;
    if (error !== undefined) {
      hasError = true;
    }
    return (
      <View>
        <Item style={{marginBottom : 10}}>

          <Input  onChangeText={input.onChange} multiline={multiline}
            placeholderTextColor={"#99A3A4"} placeholder={placeholder}
            style={FormStyle.textInput} />
        </Item>
        {touched && (error && (<Text style={{ color: "red", fontSize: 13 }}>error</Text>
        ))}

      </View>

    )
  }


  onChange = (text, name) => {
    if (text.length === 1 && name !== '6') {
    }
  };
  render() {

    console.log(this.props)
    const { handleSubmit, reset } = this.props;
    let countriesComp = [];
    let countries = this.props.countries;
    if (countries != undefined) {
      for (let i = 0; i < countries.length; i++) {
        countriesComp.push(
          <Picker.Item key={i} label={countries[i].label} value={countries[i].value} />
        )
      }


    }
    return (
      <Content>

        <Container style={FormStyle.container}>

          <Field name="fName" onChange={this.onChange}  
          placeholder={"First Name"} component={this.renderInput} />
          <Field name="lName" onChangeText placeholder={"Last Name"} component={this.renderInput} />
          <Field name="address" onChangeText multiline={true} placeholder={"Address"} component={this.renderInput} />
          <Field name="city" onChangeText placeholder={"City"} component={this.renderInput} />
          <Field name="state" onChangeText placeholder={"State"} component={this.renderInput} />

          <View style={{ marginBottom: 20 }}>

            <Picker mode={"dialog"} itemStyle={{ fontSize: 14 }} selectedValue={this.props.country} onValueChange={this.updateCountry.bind(this)}>
              {countriesComp}
            </Picker>
          </View>
          <Button block primary onPress={handleSubmit(nextHandle)}>
            <Text>Next</Text>
          </Button>
        </Container>
      </Content>
    )
  }

  updateCountry = (value) => {
    this.props.dispatch(updateData(value))
  }

}


function updateData(data) {
  return {
    type: "COUNTRY",
    payload: data
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    add: (countries) => {
      dispatch(loadItems(countries));
    }
  }
}

function loadItems(data) {
  return {
    type: "COUNTRIES",
    payload: data
  };
}
const mapStateToProps = state => {
  return {
    countries: state.countriesReducer.countries,
    country: state.countriesReducer.country
  };
};


export default reduxForm({
  validate,
  form: 'firstForm'
})(
  connect(mapStateToProps, mapDispatchToProps)(FirstForm)
);