Question

我有一个表格（redux-form），效果很好。我正在尝试将defaultInitialValues与我在redux状态下的地图合并，我已尝试过官方示例（https://redux-form.com/7.3.0/examples/initializefromstate/），但我无法让它工作。

这是工作代码（没有从州获取地图）：

import React, { Component } from 'react';
import { getFormSyncErrors, getFormValues, reduxForm } from 'redux-form';
import compose from 'recompose/compose';
import { connect } from 'react-redux';

class SimulatorForm extends Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();

    //...
  }

  render() {
    // ...
  }
}

const defaultInitialValues = {
  name: 'john doe',
};

// Bind redux-form values as props for this form.
const mapStateToProps = state => {
  return ({
    values: getFormValues('simulator')(state),
    errors: getFormSyncErrors('simulator')(state),
  });
};

export default compose(
  reduxForm({
    form: 'simulator',
    initialValues: defaultInitialValues,
  }),
  connect(mapStateToProps),
)(SimulatorForm);

通过以下示例，我尝试执行以下操作（文件结束）：

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
SimulatorForm = reduxForm({
  form: 'simulator', // a unique identifier for this form
})(SimulatorForm);

// You have to connect() to any reducers that you wish to connect to yourself
SimulatorForm = connect(
  state => ({
    initialValues: { ...defaultInitialValues, ...{ institution: 'tata' } },
  }),
  connect(mapStateToProps),
)(SimulatorForm);

export default SimulatorForm;

但是我得到了

TypeError：无法将类作为函数调用 _classCallCheck node_modules /反应-终极版/ ES /组件/ connectAdvanced.js：3

我可能错过了一些简单但却无法弄清楚的东西。

Answer 1

我在写完整个问题之后确实找到了解决方案并决定发布问题/答案而不是删除它，我希望它能帮助其他人！

const defaultInitialValues = {
  name:'john doe',
};

// Bind redux-form values as props for this form.
const mapStateToProps = state => {
  return ({
    values: getFormValues('simulator')(state),
    errors: getFormSyncErrors('simulator')(state),
  });
};

const mapDispatchToProps = dispatch => ({
  goToStep2: () => dispatch({
    type: 'GO_TO_STEP_2',
  }),
});

// XXX If your Form depends on state values (like mine does), you MUST load them BEFORE loading the form itself, or they'll be undefined and your app will likely crash 
SimulatorForm = connect(mapStateToProps, mapDispatchToProps)(SimulatorForm);

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
// XXX See https://redux-form.com/7.3.0/examples/initializefromstate/
SimulatorForm = reduxForm({
  form: 'simulator', // a unique identifier for this form
})(SimulatorForm);

// Here happens the magic, getting values from state and merging them with default values
export default connect(
  state => {
    const initialValuesFromSettings = state.simulator.settings.modules.formInitialValues.enabled === true ?
      state.simulator.settings.modules.formInitialValues.values
      : {};

    return {
      initialValues: { ...defaultInitialValues, ...initialValuesFromSettings },
    };
  },
)(SimulatorForm);

Redux表单 - 无法获取“从状态初始化”示例工作 - TypeError：无法将类作为函数调用

1 个答案: