编辑字段不起作用和使用 redux 存储管理表单值 - redux-form

Question

我正在使用redux-form v6.7.0。我提到了这个link 并尝试在单击按钮时异步加载数据，但它没有按预期工作。我在componentWillReceiveProps 中使用了change 方法，但使用后我无法编辑Field。

我不知道使用change 方法是使用redux-form 进行管理的唯一且适当的方法。 PFB 示例代码 sn-p，我在 componentWillReceiveProps 中使用 change 方法加载了 personName，之后我无法编辑 Field。对于personAge，Field 工作正常，因为我没有使用change 方法。

另外，我想将所有更改的表单值与我的redux 存储同步（意味着让每个更改都与我的redux 存储保持更新）。

任何帮助将不胜感激。提前致谢。

/* reducers should always maintain immutability */

function PersonInfoReducer(state = { personName: "", personAge: "" }, action) {
  switch (action.type) {
    case "SAVE_PERSON_DATA":
      return Object.assign({}, state, action.payload);
default:
      return state;
  }
}

/* save person data action */
var savePersonData = (data) => {
  return {
    type: "SAVE_PERSON_DATA",
    payload: data
  };
};

/* form sample component */
class FormSample extends React.Component {
  componentDidMount() {
    
  }

  componentWillReceiveProps(nextProps) {
    //console.log(nextProps);
    const { change } = this.props;
    //debugger;
    if(nextProps.initialValues) {
      change("personName", nextProps.initialValues.personName);
      //change("personAge", nextProps.initialValues.personAge);
    }
  }
  
  loadPersonData() {
    const { initialize, savePersonData } = this.props;

    var personInfo = {
        personName: "Abraham",
        personAge: 21
    };
    savePersonData(personInfo);
  }

  render() {
    return (
      <form>
        <ReduxForm.Field name="personName" component="input" type="text" placeholder="Person Name" />
        <ReduxForm.Field name="personAge" component="input" type="text" placeholder="Person Age" />
        <button type="button" onClick={() => this.loadPersonData()}>Load</button>
        <h5>Values:</h5>{JSON.stringify(this.props.formValues)}
      </form>
    );
  }
}

FormSample = ReduxForm.reduxForm({
    form: "FormSample", // a unique identifier for this form
})(FormSample);

const selector = ReduxForm.formValueSelector("FormSample");

function mapStateToProps(state) {
  const { personInfo } = state;

  return {
    initialValues: personInfo,
    formValues: selector(state, "personName", "personAge")
  };
}

function mapDispatchToProps(dispatch) {
  return Redux.bindActionCreators({
    savePersonData
  }, dispatch);
}

FormSample = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(FormSample);


const allReducers = Redux.combineReducers({
  form: ReduxForm.reducer,
  personInfo: PersonInfoReducer
});

const store = Redux.createStore(allReducers);

ReactDOM.render(<ReactRedux.Provider store={store}><FormSample /></ReactRedux.Provider>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script>

<div id="root"></div>

Answer 1

我终于以这个解决方案结束了:)。 PFB代码sn-p。

/* form sample component */
class FormSample extends React.Component {
  componentWillReceiveProps(nextProps) {
    //const { change, initialize } = this.props;
  }
  
  loadPersonData() {
    const { initialize, savePersonData } = this.props;

    var personInfo = {
        personName: "Abraham",
        personAge: 21
    };
    savePersonData(personInfo);
  }
  
  loadAnotherData() {
    const { savePersonData } = this.props;

    var personInfo = {
        personName: "Gnanasingh",
        personAge: 23
    };
    savePersonData(personInfo);
  }
  
  submit() {
    const { formValues, savePersonData } = this.props;
  
    savePersonData(formValues);
  }

  render() {
    const { formValues, personInfo } = this.props;
  
    return (
      <form>
        <ReduxForm.Field name="personName" component="input" type="text" placeholder="Person Name" />
        <ReduxForm.Field name="personAge" component="input" type="text" placeholder="Person Age" />
        <button type="button" onClick={() => this.loadPersonData()}>Load</button>
        <button type="button" onClick={() => this.loadAnotherData()}>Load Another</button>
        <button type="button" onClick={() => this.submit()}>Submit</button>
        <h5>Form Values:</h5>{JSON.stringify(formValues, null, 2)}
        <h5>Store Values:</h5>{JSON.stringify(personInfo, null, 2)}
      </form>
    );
  }
}

FormSample = ReduxForm.reduxForm({
    form: "FormSample", // a unique identifier for this form
    enableReinitialize: true
})(FormSample);

const selector = ReduxForm.formValueSelector("FormSample");

function mapStateToProps(state) {
  const { personInfo } = state;

  return {
    initialValues: personInfo,
    formValues: selector(state, "personName", "personAge"),
    personInfo
  };
}

function mapDispatchToProps(dispatch) {
  return Redux.bindActionCreators({
    savePersonData
  }, dispatch);
}

FormSample = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(FormSample);


/* reducer should always maintain immutability */

function PersonInfoReducer(state = { personName: "", personAge: "" }, action) {
  switch (action.type) {
    case "SAVE_PERSON_DATA":
    debugger;
      return Object.assign({}, state, action.payload);
    default:
      return state;
  }
}

/* save person data action */
var savePersonData = (data) => {
  return {
    type: "SAVE_PERSON_DATA",
    payload: data
  };
};

const allReducers = Redux.combineReducers({
  form: ReduxForm.reducer,
  personInfo: PersonInfoReducer
});

const store = Redux.createStore(allReducers);

ReactDOM.render(<ReactRedux.Provider store={store}><FormSample /></ReactRedux.Provider>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script>


<div id="root"></div>