重新渲染错误太多。 使用带有 Stepper 组件的 React Hooks

Question

I have a Stepper component that receives a prop called 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>
  )
}

I need to set the property activeStep according to my step prop, something like this:

if (step === 0) {
    setActiveStep(0)
  } else if (step === 1) {
    setActiveStep(0)
  } else if (step === 2) {
    setActiveStep(2)
  } else if (step === 3) {
    setActiveStep(3)
  } else if (step === 4) {
    setActiveStep(4)
  } else if (step === 5) {
    setActiveStep(4)
  }

The code above throw an error: "Too many re-renders. React limits the number of renders to prevent an infinite loop."

What is the best way to do this?

Answer 1

You should use useEffect to react (no pun) to any change in step :

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>
  )
}

Don't know where you getSteps from, maybe you should pass that in props too.

Answer 2

Oh god, silly me.

I dont need another state for my stepper component, I can just manipulate the step props, like this (not very pleasing, but its working)

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>
  )
}