React native React本机redux表单初始值未显示_React Native_React Redux

React native React本机redux表单初始值未显示

react-native

React native React本机redux表单初始值未显示,react-native,react-redux,React Native,React Redux,这是我的redux表单代码。我还将enableReinitialize设置为true，并遵循react表单文档我对initialValues对象进行了硬编码，仅用于测试目的。但我的表单仍然没有初始化 import React, { Component } from 'react'; import { Container, Header, Body, Content, Title, Button, Text, Left, Icon, Right } from 'native-base'; imp

这是我的redux表单代码。我还将

enableReinitialize

设置为

true

，并遵循react表单文档

我对

initialValues

对象进行了硬编码，仅用于测试目的。但我的表单仍然没有初始化

import React, { Component } from 'react';
import { Container, Header, Body, Content, Title, Button, Text, Left, Icon, Right } from 'native-base';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import MyTextInput from './TextInput';
import { fetchProfileData } from '../../actions';

const validate = values => {
  const error = {};
  error.email = '';
  error.name = '';
  error.mobile = '';
  let ema = values.email;
  let nm = values.name;
  let mob = values.mobile;
  if (values.email === undefined) {
    ema = '';
  }

  if (values.name === undefined) {
    nm = '';
  }

  if (values.mobile === undefined) {
    mob = '';
  }

  if (ema.length < 8 && ema !== '') {
    error.email = 'too short';
  }

  if (!ema.includes('@') && ema !== '') {
    error.email = '@ not included';
  }

  if (nm.length > 8) {
    error.name = 'max 8 characters';
  }

  if (mob.length < 10 && mob !== '') {
    error.mobile = 'min 10 digits';
  }
  return error;
};

class SimpleForm extends Component {

  componentWillMount() {
    this.props.fetchProfileData();
  }

  render() {
     const { handleSubmit } = this.props;
     console.log(this.props.initialValues);
     return (
      <Container>
        <Header>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.navigate('DrawerOpen')}
            >
            <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>Profile</Title>
          </Body>
          <Right />
        </Header>
        <Content padder>
            <Field name='name' component={MyTextInput} label='Vendor Name' />
            <Field name='company_name' component={MyTextInput} label='Company Name' />
            <Field name='office_address' component={MyTextInput} label='Office Address' />
            <Field name='email' component={MyTextInput} label='Email' />
            <Field name='mobile' component={MyTextInput} label='Contact' />
            <Button block primary onPress={handleSubmit((values) => console.log(values))} style={{ marginTop: 20 }}>
            <Text>Save</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
    initialValues: { name: 'abcde@gmail.com' }
  };
};

SimpleForm = connect(mapStateToProps, { fetchProfileData }
)(SimpleForm);

export default reduxForm({
  form: 'test',
  validate,
  enableReinitialize: true
})(SimpleForm);

import React，{Component}来自'React'；
从“本机基础”导入{容器、标题、正文、内容、标题、按钮、文本、左侧、图标、右侧}；
从“redux form”导入{Field，reduxForm}；
从'react redux'导入{connect}；
从“/TextInput”导入MyTextInput；
从“../../actions”导入{fetchProfileData}；
常量验证=值=>{
常量错误={}；
error.email=''；
error.name=''；
error.mobile=''；
让ema=values.email；
设nm=values.name；
让mob=values.mobile；
如果（values.email==未定义）{
ema=''；
}
如果（values.name==未定义）{
nm=''；
}
如果（values.mobile==未定义）{
暴民=''；
}
如果（ema.length<8&&ema！=''）{
error.email='太短'；
}
如果（！ema.includes（'@'）&&ema！=''）{
错误。电子邮件=“@未包含”；
}
如果（纳米长度>8）{
error.name='最多8个字符'；
}
如果（移动长度<10&&mob！=''）{
error.mobile='min10位'；
}
返回误差；
};
类SimpleForm扩展组件{
组件willmount（）{
this.props.fetchProfileData（）；
}
render（）{
const{handleSubmit}=this.props；
console.log（this.props.initialValues）；
返回(
this.props.navigation.navigate（'drawerropen'）}
>
轮廓
console.log（values））}style={{{marginTop:20}}>
拯救
);
}
}
常量mapStateToProps=状态=>{
返回{
初始值：{name:'abcde@gmail.com' }
};
};
SimpleForm=connect（mapStateToProps，{fetchProfileData}
)（SimpleForm）；
导出默认reduxForm({
表格：'测试'，
验证
启用重新初始化：true
})（SimpleForm）；

我已经为此挣扎了一段时间。我从来没能用道具做任何事。但我只需要一些初始状态的东西，所以这对我来说是可行的。希望它对你也有用

-----如果只想设置一次初始值，则此操作有效

export default reduxForm({
  form: 'test',
  validate,
  initialValues: { name: 'abcde@gmail.com' }
})(SimpleForm);

编辑：似乎我需要传入变量。对于MapStateTops中设置的变量，这对我来说是可行的。我认为您的设置不起作用，因为它正在将状态和道具映射到表单，然后添加reduxForm。看起来应该换个方向

const mapStateToProps = (state) => {
  return {
    initialValues: {
      name: 'foobar',
    }
  }
}

export default (connect(mapStateToProps, mapDispatchToProps)(reduxForm({
  form: 'groupForm',
  enableReinitialize: true
})(SimpleForm)))

不客气。如果它对您有效，请将我的答案标记为帮助未来希望解决此问题的开发人员。