生成动态向导-警告：在现有状态转换过程中（例如，在`render`或另一个组件的构造函数中）无法更新

Question

我正在尝试根据向导第2步中选择的值动态呈现表单。在第2步中，用户确定天线的数量，这将更新计数，我希望将这种数量的形式呈现给组件。它可以工作，但是我得到警告，我不应该这样做，所以我想知道是否有人知道正确的编码风格。

这是向导组件：

class WizardView extends React.Component {
  render() {
    return (
      <GridContainer justify="center">
        <GridItem xs={12} sm={8}>
          <Wizard
            // validate
            steps={[
              { stepName: "", stepComponent: Step1, stepId: "about" },
              { stepName: "", stepComponent: Step2, stepId: "antenna" },
            ].concat(formArray(this.props.antennaCount))
          }
            title="Configure Your Reader"
            subtitle="This information will help you track your items better."
          />
        </GridItem>
      </GridContainer>
    );
  }
}

function mapStateToProps(state) {
  return { antennaCount : state.reader.antennaCount}
}

export default (compose(
  connect(mapStateToProps,actions),
  reduxForm({ form: 'settings'})
)(WizardView));

这是附加的表单生成器功能：

import AntennaForm from "../AntennaForms/AntennaForm";

export const formArray = (NumberofAntennas) => {
    switch(NumberofAntennas) {
        case 1: 
            return { stepName: "", stepComponent: AntennaForm, stepId:"antenna_1", antenna:1 }
        case 2: 
            return [{ stepName: "", stepComponent: AntennaForm, stepId:"antenna_1", antenna:1 }, { stepName: "", stepComponent: AntennaForm, stepId:"antenna_2", antenna:2 }]

        case 3: 
        return [{ stepName: "", stepComponent: AntennaForm, stepId:"antenna_1", antenna:1 }, { stepName: "", stepComponent: AntennaForm, stepId:"antenna_2", antenna:2 },{ stepName: "", stepComponent: AntennaForm, stepId:"antenna_3", antenna:3 }]

        case 4: 
            return  [{ stepName: "", stepComponent: AntennaForm, stepId:"antenna_1", antenna:1 },
                    { stepName: "", stepComponent: AntennaForm, stepId:"antenna_2", antenna:2 },
                    { stepName: "", stepComponent: AntennaForm, stepId:"antenna_3", antenna:3 },
                    { stepName: "", stepComponent: AntennaForm, stepId:"antenna_4", antenna:4 }]
    default: 
        return { stepName: "", stepComponent: AntennaForm, stepId:`antenna${1}` }
    }

}