Redux Form無法填充初始值

Question

我正在編輯我的項目上的編輯功能，爲此我需要填寫表單，用戶可以在其中更改其值並保存它。但我無法填寫頁面上的表格。我正在使用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)