Формы не отображаются при использовании Redux-формы

Question

Я пытаюсь создать форму, используя FormArray , который имеет несколько динамических полей, генерируемых при нажатии некоторых кнопок.Подобно этой логике (пример из избыточной формы).

Все это работает на моей странице сборника рассказов, но не работает на моем основном проекте.Кнопка не отображает компонент, пока выполняется действие, и соответствующие поля в состоянии избыточности обновлены.

Вот снимок экрана, когда я делаю это в своем проекте.Я вижу отправляемое действие и соответствующие поля, но поля не зарегистрированы:

Вот скриншот из моего сборника рассказов.Здесь после каждого действия ARRAY_PUSH выдается серия REGISTER_FIELDS:

Почему действие по регистрации поля не генерируется в основном проекте?Вот код, который практически одинаков в обоих проектах.

import React from 'react';
// Rest of the import statements

export const styles = (theme) => ({
  root: {
    width: '100%',
    fontFamily: 'Muli',
    overflow: 'hidden',
    margin: '20px 0 10px 0',
  },
  // Some more styles
});

const CustomTableCell = withStyles((theme) => ({
  // Style for custom table cell
}))(TableCell);

const renderRulesContainer = ({ fields, meta: { error }, classes }) => (
  <div style={{ overflow: 'scroll', maxHeight: 700 }}>
    <Table className={classes.table}>
      <TableHead>
        <TableRow className={classes.rootRow}>
          <CustomTableCell>MODE*</CustomTableCell>
          <CustomTableCell>NETWORK/BANK*</CustomTableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {fields.map((rule, index) => (
          <TableRow className={classes.row} key={`rule-${index}`}>
            <CustomTableCell>
              <Field
                name={`${rule}.mode`}
                component={CustomSelectInput}
                placeholder={'Select Mode'}
              >
                {data.modes.map((mode) => (
                  <MenuItem
                    classes={{
                      root: classes.menuRoot,
                      selected: classes.itemSelected,
                    }}
                    key={mode.value}
                    value={mode.value}
                  >
                    {mode.name}
                  </MenuItem>
                ))}
              </Field>
            </CustomTableCell>
            <CustomTableCell>
              <Field
                name={`${rule}.networkBank`}
                component={CustomSelectInput}
                placeholder={'Network/Bank'}
              >
                {data.networkBankOptions.CC.map((bank) => (
                  <MenuItem
                    classes={{
                      root: classes.menuRoot,
                      selected: classes.itemSelected,
                    }}
                    key={bank.value}
                    value={bank.value}
                  >
                    {bank.name}
                  </MenuItem>
                ))}
              </Field>
            </CustomTableCell>

          </TableRow>
        ))}
      </TableBody>
    </Table>
    <CustomButton handleClick={(event) => { event.preventDefault(); fields.push({}); }} type={'secondary'} buttonLabel={'Add New Rule'} />
  </div>
);

renderRulesContainer.propTypes = {
  classes: PropTypes.any,
  fields: PropTypes.any,
  meta: PropTypes.any,
};

const RenderRulesContainer = withStyles(styles)(renderRulesContainer);

const renderRateCardContainer = ({ fields, meta: { error, submitFailed } }) => (
  <div>
    {fields.map((rateCard, index) => (
      <div key={`rate-card-${index}`}>
        <Field
          name={`${rateCard}.dateRange`}
          component={DateRangeFilter}
        />
        <FieldArray
          name={`${rateCard}.rules`}
          component={RenderRulesContainer}
        />
      </div>
    ))}
    {submitFailed && error && <span>{error}</span>}
    <CustomButton type={'secondary'} handleClick={(event) => { event.preventDefault(); fields.push({}); }} buttonLabel={'Add Rate Card'} />
  </div>
);

renderRateCardContainer.propTypes = {
  fields: PropTypes.any,
  meta: PropTypes.any,
  handleChange: PropTypes.func,
};

const RenderRateCardContainer = withStyles(styles)(renderRateCardContainer);

class PartyEditForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  render() {
    const { classes, handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <form onSubmit={handleSubmit(this.props.onSubmit)}>
        <div>
          <FieldArray name={'rateCards'} component={RenderRateCardContainer} />
        </div>
        <div>
          <Button type="submit" disabled={submitting}>
            Submit
          </Button>
          <Button type="button" disabled={pristine || submitting} onClick={reset}>
            Clear Values
          </Button>
        </div>
      </form>
    );
  }
}

PartyEditForm.propTypes = {
  classes: PropTypes.any,
  handleSubmit: PropTypes.any,
  pristine: PropTypes.any,
  reset: PropTypes.any,
  submitting: PropTypes.any,
  onSubmit: PropTypes.any,
};

const partyEditForm = withStyles(styles)(PartyEditForm);

export default reduxForm({
  form: 'fieldArrays',
  enableReinitialize: true,
})(partyEditForm);