Javascript 重新渲染错误太多。使用带有步进器组件的React挂钩

我有一个步进器组件，它接收一个叫做step的道具

export default function HorizontalLinearStepper({ step }) {
  const classes = useStyles()
  const [activeStep, setActiveStep] = React.useState(0)
  const steps = getSteps()

  return (
    <div className={classes.root}>
      <Stepper
        activeStep={step}
        connector={<ColorlibConnector />}
        alternativeLabel
      >
        {steps.map(label => (
          <Step key={label}>
            <StepLabel
              StepIconProps={{
                classes: { root: classes.stepIcon },
              }}
            >
              {label}
            </StepLabel>
          </Step>
        ))}
      </Stepper>
    </div>
  )
}

上面的代码抛出一个错误： “重新渲染的次数过多。React限制渲染次数以防止无限循环。”

执行此操作的最佳方法是什么？

您应该使用以下方法对

步骤中的任何更改作出反应（无双关语）：

export default function HorizontalLinearStepper({ step }) {
  const classes = useStyles()
  const [activeStep, setActiveStep] = React.useState(step)
  const steps = getSteps()
  React.useEffect(() => {
    setActiveStep(step)
  }, [step])

  return (
    <div className={classes.root}>
      <Stepper
        activeStep={step}
        connector={<ColorlibConnector />}
        alternativeLabel
      >
        {steps.map(label => (
          <Step key={label}>
            <StepLabel
              StepIconProps={{
                classes: { root: classes.stepIcon },
              }}
            >
              {label}
            </StepLabel>
          </Step>
        ))}
      </Stepper>
    </div>
  )
}


导出默认函数HorizontalLinearStepper（{step}）{
常量类=useStyles（）
常量[activeStep，setActiveStep]=React.useState（步骤）
const steps=getSteps（）
React.useffect（（）=>{
设置活动步骤（步骤）
}，[步骤]）
返回(
{steps.map（标签=>(
{label}
))}
)
}

不知道你从哪里获得步骤，也许你也应该在道具中传递。
哦，天哪，我真傻

我的步进器组件不需要另一个状态，我只需要操纵步进道具，就像这样（不是很令人愉快，但它工作正常）

导出默认函数HorizontalLinearStepper（{step}）{
常量类=useStyles（）
const steps=getSteps（）
如果（步骤==0）{
步长=0
}否则如果（步骤===1）{
步长=0
}否则如果（步骤===2）{
步骤=1
}否则如果（步骤===3）{
步骤=2
}否则如果（步骤===3）{
步骤=2
}否则如果（步骤===4）{
步骤=3
}否则如果（步骤===5）{
步骤=4
}否则如果（步骤===6）{
步骤=4
}
返回(
{steps.map（标签=>(
{label}
))}
)
}
…
setActiveStep（步骤1）
。？我不能这样做。给出一个错误“太多的重新渲染。React限制渲染数量以防止无限循环”。我以前也做过类似的事情，我有一个步进器组件，它包含一些子节点，然后您可以从
props.children
中获得步骤。很好，但我需要在这之前对步骤执行一些操作。我需要根据步骤属性值设置activeSteps。因为我的第一步有两个页面（两个组件），所以。。。如果步骤属性等于0和1，则activeStep必须设置为0。。。如果我每一步只有一个组件，这将是完美的
export default function HorizontalLinearStepper({ step }) {
  const classes = useStyles()
  const [activeStep, setActiveStep] = React.useState(step)
  const steps = getSteps()
  React.useEffect(() => {
    setActiveStep(step)
  }, [step])

  return (
    <div className={classes.root}>
      <Stepper
        activeStep={step}
        connector={<ColorlibConnector />}
        alternativeLabel
      >
        {steps.map(label => (
          <Step key={label}>
            <StepLabel
              StepIconProps={{
                classes: { root: classes.stepIcon },
              }}
            >
              {label}
            </StepLabel>
          </Step>
        ))}
      </Stepper>
    </div>
  )
}


export default function HorizontalLinearStepper({ step }) {
  const classes = useStyles()
  const steps = getSteps()

  if (step === 0) {
    step = 0
  } else if (step === 1) {
    step = 0
  } else if (step === 2) {
    step = 1
  } else if (step === 3) {
    step = 2
  } else if (step === 3) {
    step = 2
  } else if (step === 4) {
    step = 3
  } else if (step === 5) {
    step = 4
  } else if (step === 6) {
    step = 4
  }
  return (
    <div className={classes.root}>
      <Stepper
        activeStep={step}
        connector={<ColorlibConnector />}
        alternativeLabel
      >
        {steps.map(label => (
          <Step key={label}>
            <StepLabel
              StepIconProps={{
                classes: { root: classes.stepIcon },
              }}
            >
              {label}
            </StepLabel>
          </Step>
        ))}
      </Stepper>
    </div>
  )
}