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

【问题标题】：Too many re-renders error. Using React Hooks with a Stepper component重新渲染错误太多。使用带有 Stepper 组件的 React Hooks
【发布时间】：2019-11-04 19:04:42
【问题描述】：

我有一个 Stepper 组件，它接收一个名为 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>
  )
}

我需要根据我的 step 属性设置属性 activeStep，如下所示：

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

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

最好的方法是什么？

【问题讨论】：

...setActiveStep(step-1)..?
我不能这样。给出错误“重新渲染过多。React 限制渲染次数以防止无限循环。”

标签： javascript reactjs

【解决方案1】：

您应该使用useEffect 对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>
  )
}

不知道你getSteps 来自哪里，也许你也应该在道具中传递它。

【讨论】：

我过去做过类似的事情，我有这个带一些子节点的步进器组件，然后你会从props.children 获得步骤。
很好，但我需要在这之前做一些事情。我需要根据 step 道具值设置 activeSteps。因为我的第一步有两个页面（2 个组件），所以...如果 step prop 等于 0 和 1，activeStep 必须设置为 0...如果我每个步骤只有一个组件，这将是完美的

【解决方案2】：

天哪，我真傻。

我的步进器组件不需要其他状态，我可以像这样操作步进道具（不是很令人愉快，但它可以工作）

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

【讨论】：