Question

我正在编写项目的编辑功能，我必须填写表单，用户可以在其中更改其值并保存。但我无法在pageload上填写表格。我正在使用redux-form。我的容器组件是： -

const mapStateToProps=(state,ownProps)=> {
  return{
    projectList:state.projects.projectList,
    projectTypeList:state.projects.projectTypeList,
    newProject:state.projects.newProject,
    aysncValidate:state.projects.aysncValidate,
    projectId:ownProps.id,
    initialValues:state.projects.project.projectData

  }
}

const mapDispatchToProps=(dispatch)=> {
  return{

    fetchProjectType:()=>{
      dispatch(fetchProjectType()).then((response)=>{
        dispatch(fetchProjectTypeSuccess(response.value.data.objdata))
      })
      .catch((error)=>{
        dispatch(fetchProjectTypeFailure(error))
      })
    },

    fectchProjectById:(projectId)=>{
      dispatch(fectchProjectById(projectId))
        .then((response)=> {
          dispatch(fetchProjectByIdSuccess(response.value.data.objdata[0]))
        })
        .catch((error)=>{
          dispatch(fetchProjectByIdFailure(error))
        })
    }

  }
}

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

看到我有initialValues属性。我获取initailValues上的数据但无法与表单绑定。我的表单组件是： -

class NewProject extends Component{
  static contextTypes = {
    router: PropTypes.object
  };

  constructor(props) {
    super(props);
    this.validateAndSave=this.validateAndSave.bind(this)
  }

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

  componentWillReceiveProps(nextProps){
    console.log('nextProps' , nextProps);
  }

  componentDidMount(){
    if(this.props.projectId){
      this.props.fectchProjectById(this.props.projectId);
    }
  }

  renderSource(source){
   return source.map((item)=>{
     return(
       <MenuItem key={item._id} value={item.Title} primaryText={item.Title} />
     )
   })
  }

  renderNotification(success){
   let props={
     alertType:'success',
     alertIcon:<Done />,
     iconColor:green700,
     alertMsg:success,
     title:"Success"
   };
   if(success){
     return(<Alert  {...props} />);
   }
  }

  renderError(error){
    let props={
      alertType:'error',
      alertIcon:<Close />,
      iconColor:red700,
      alertMsg:"Oops! a server error occured , please try again.",
      title:"Error"
    };
    if(error){
      return(<Alert  {...props} />);
    }
  }

  renderAsyncValidationError(isExist){
    let props={
      alertType:'error',
      alertIcon:<Close />,
      iconColor:red700,
      alertMsg:"Oops! project name already exists , please try diffrent name",
      title:"Error"
    };
    if(isExist){
      return(<Alert  {...props} />);
    }
  }

  validateAndSave(values,dispatch) {
    return dispatch(addProject(values)).
    then((response)=> {
      dispatch(addProjectSuccess(response.value.data.objdata));
    })
    .catch((error)=>{
      dispatch(addProjectFailue(error))
    })
  }
  render(){
    const {projectTypes}=this.props.projectTypeList;
    const {success,error}=this.props.newProject;
    const {isExist}=this.props.aysncValidate;
    const {asyncValidating,handleSubmit,pristine, reset, submitting, invalid,initialValues} = this.props;
    console.log('initialValues ' , initialValues)
    return(
      <PageBase title= "Add Project">
        <form onSubmit={ handleSubmit(this.validateAndSave) }>
          {this.renderNotification(success)}
          {this.renderError(error)}
          { this.renderAsyncValidationError(isExist)}
          <Field name="ProjectName" type="text" label="Project Title" fullWidth={true} component={renderTextField} />

          <Field name="ProjectType" label="Project Type" fullWidth={true} component={renderSelectField}>
           {this.renderSource(projectTypes)}
          </Field>

          <Field name="StartDate" label="Start Date" fullWidth={true} component={renderDateField} />

          <Field name="EndDate" label="End Date" fullWidth={true} component={renderDateField} />

          <Field name="Description" type="text" label="Description" fullWidth={true} component={renderTextField} />

          <div style={styles.buttons}>
            <Link to="/project">
              <RaisedButton label="Cancel"/>
            </Link>
            <RaisedButton  label="Save" style={styles.saveButton} disabled={ invalid || submitting } type="submit" primary={true}/>
          </div>
        </form>
      </PageBase>
    )
  }
}

export default  reduxForm({
  form: 'NewProject',
  fields: ['_id','ProjectName','ProjectType','StartDate','EndDate','Description'],
  validate
})(NewProject)

请帮帮我。

Answer 1

您需要在此处传递mapStateToProps：

export default  reduxForm({
  form: 'NewProject',
  fields ['_id','ProjectName','ProjectType','StartDate','EndDate','Description'],
  validate
  }, mapStateToProps)(NewProject)

Redux表格不能填写initialValues

1 个答案: