初始化還原形式的嚮導

所以我有一個簡單的形式嚮導取自一個例子在redux形式。我想用從異步API調用接收的數據初始化字段。初始化還原形式的嚮導

現在的方式是，在嚮導的每個頁面中沒有enableReinitialize: true參數而沒有填充字段，因爲初始化在啓動服務器請求時已經發生過一次。另一方面，如果我將enableReinitialize: true添加到嚮導頁面，則在頁面之間移動時將丟棄任何用戶輸入，並且initialValues將再次設置。

我也嘗試在每個頁面中添加keepDirtyOnReinitialize: true選項與enableReinitialize: true，但無濟於事。

當需要通過異步獲取的數據初始化一個字段的子集時，創建表單嚮導的正確方法是什麼？這些數據必須被用戶覆蓋？

WizardForm.jsx：

import React, {Component, PropTypes} from 'react' 
import WizardFormFirstPage from './WizardFormFirstPage.jsx' 
import WizardFormSecondPage from './WizardFormSecondPage.jsx' 
import WizardFormThirdPage from './WizardFormThirdPage.jsx' 
import fetchData from "./fetchData.jsx"; 
import {connect} from "react-redux"; 

class WizardForm extends Component { 

constructor(props) { 
    super(props); 
    this.nextPage = this.nextPage.bind(this); 
    this.previousPage = this.previousPage.bind(this); 
    this.state = { 
     page: 1 
    } 
} 

componentWillMount() { 
    if (!this.props.hasFetched) 
     this.props.fetchData(); 
} 

nextPage() { 
    this.setState({ page: this.state.page + 1 }) 
} 

previousPage() { 
    this.setState({ page: this.state.page - 1 }) 
} 

render() { 
    const { onSubmit } = this.props; 
    const { page } = this.state; 
    return (
     <div> 
      {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage}  initialValues={this.props.initialValues}/>} 
      {page === 2 && 
      <WizardFormSecondPage previousPage={this.previousPage} initialValues={this.props.initialValues} 
            onSubmit={this.nextPage}/>} 
      {page === 3 && 
      <WizardFormThirdPage previousPage={this.previousPage} initialValues={this.props.initialValues} 
           onSubmit={onSubmit}/>} 
      <label>{this.props.isFetching ? "Fetching data.." : "Fetched data successfully." }</label> 
     </div> 
    ) 
} 
} 

function mapStateToProps(state) { 
    return { 
     initialValues: state.prefill.data, 
     isFetching: state.prefill.fetching, 
     hasFetched: state.prefill.fetched 
    } 
} 

WizardForm = connect(
    mapStateToProps, 
    {fetchData} 
)(WizardForm); 

WizardForm.propTypes = { 
    onSubmit: PropTypes.func.isRequired, 
    initialValues: PropTypes.object 
}; 

export default WizardForm;

WizardFormFirstPage.jsx：

class WizardFormFirstPage extends Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     const {handleSubmit} = this.props; 
     return (
      <form onSubmit={handleSubmit}> 
       <Field name="firstName" type="text" component={renderField} label="First Name"/> 
       <Field name="lastName" type="text" component={renderField} label="Last Name"/> 
       <Field name="downPayment" type="text" component={renderField} 
         label="Down Payment" normalize={normalizeDownPayment}/> 
       <div> 
        <button type="submit" className="next">Next</button> 
       </div> 
      </form> 
     ) 
    }; 
} 

WizardFormFirstPage = reduxForm({ 
    form: "wizard", 
    destroyOnUnmount: false, 
    forceUnregisterOnUnmount: true, 
    //enableReinitialize: true, // <-- ! 
    validate 
})(WizardFormFirstPage); 

export default WizardFormFirstPage;

fetchData.jsx：

export default function fetchData() { 
    return (dispatch) => { 
     dispatch({type: "FETCH_DATA_START"}); 
     axios.get("http://rest.learncode.academy/api/nordischby/customer") 
      .then(response => { 
       dispatch({type: "FETCH_DATA_FINISH", data: response.data[0]}); 
      }) 
      .catch(error => { 
       console.error(error); 
      }); 
    } 
};

prefill.jsx：

const initialState = { 
    data: {}, 
    fetching: false, 
    fetched: false, 
    error: null 
}; 

const prefillReducer = (state = initialState, action) => { 
switch (action.type) { 
    case "FETCH_DATA_START": 
     return { 
      ...state, 
      fetching: true 
     }; 
    case "FETCH_DATA_FINISH": 
     return { 
      ...state, 
      data: action.data, 
      fetching: false, 
      fetched: true 
     }; 
     default: 
      return state 
    } 
}; 

export default prefillReducer;

來源

2017-03-06 tesseract

我發現有什麼問題。對於未來的參考：

我現在使用下列選項reduxForm()：

export default reduxForm({ 
    form: "wizard", 
    destroyOnUnmount: false, 
    //forceUnregisterOnUnmount: true, // <-- This bad boy was wrong 
    keepDirtyOnReinitialize: true, 
    enableReinitialize: true, 
    validate 
})(WizardFormThirdPage)

來源

2017-03-06 13:29:20 tesseract

初始化還原形式的嚮導

回答

相關問題