使用Redux-form时表单不呈现

Question

我正在尝试使用FormArray来创建一个表单，该表单具有单击某些按钮时生成的多个动态字段。类似于this逻辑（来自redux-form的示例）。

整件事都可以在我的故事书页面上使用，但不能在我的主项目上运行。发出动作并更新redux状态下的相应字段时，按钮不呈现组件。

这是我在项目中进行操作时的屏幕截图。我可以看到正在发出动作，并添加了相应的字段，但这些字段未注册：

这是我的故事书中的屏幕截图。在每个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);