javascript - 使用 redux-form 异步加载数据不起作用

Question

我正在尝试使用 redux-form v6.7.0 异步加载数据以形成表单，但它不起作用。我提到了这个link 。下面是我的示例代码。任何帮助，将不胜感激。提前致谢。

/* reducers should always maintain immutability */

var personInfo = {
  name: "",
  age: ""
};

function PersonInfoReducer(state = personInfo, 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() {
    const { initialize, savePersonData } = this.props;

    setTimeout(() => {
      var personInfo = {
        name: "Abraham",
        age: 21
      };
      savePersonData(personInfo);
    }, 3000);

  }

  componentWillReceiveProps(nextProps) {
    //console.log(nextProps);
    //debugger;
    //this.props.change("personName", nextProps.personInfo.name);
    //this.props.change("personAge", nextProps.personInfo.age);
  }

  render() {
    return (
      <form>
        <ReduxForm.Field name={"personName"} component="input" type="text" />
        <ReduxForm.Field name={"personAge"} component="input" type="text" />
        <h4>Values: </h4>{JSON.stringify(this.props.personInfo)}
      </form>
    );
  }
}

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

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

  return {
    initialValues: personInfo,
    personInfo: personInfo
  };
}

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

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


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

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

在调用 Redux Form 高阶组件时，需要将 enableReinitialize 设置为 true，以便它在从 Redux state 接收到新的 props 时更新初始值:

FormSample = ReduxForm.reduxForm({
  form: 'FormSample',
  enableReinitialize: true
})(FormSample);

参见http://redux-form.com/6.0.2/examples/initializeFromState/