Trop d'erreurs de nouveau rendu. Utilisation de React Hooks avec un composant Stepper

Question

J'ai un composant Stepper qui reçoit un accessoire appelé étape

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

J'ai besoin de définir la propriété activeStep en fonction de mon accessoire step, quelque chose comme ceci:

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

Le code ci-dessus génère une erreur: "Trop de nouveaux rendus. React limite le nombre de rendus pour empêcher une boucle infinie."

Quelle est la meilleure façon de procéder?

javascript reactjs

1

fjurr 4 nov. 2019 à 22:04

Answer 1

Oh mon dieu, idiot moi.

Je n'ai pas besoin d'un autre état pour mon composant stepper, je peux simplement manipuler les accessoires d'étape, comme ça (pas très agréable, mais son fonctionnement)

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

1

fjurr 4 nov. 2019 à 22:38

Answer 2

Vous devez utiliser useEffect pour réagir (sans jeu de mots) à tout changement dans 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>
  )
}

Je ne sais pas d'où vous venez getSteps, peut-être devriez-vous également le transmettre dans les accessoires.

1

maioman 4 nov. 2019 à 19:51

Trop d'erreurs de nouveau rendu. Utilisation de React Hooks avec un composant Stepper

2 réponses

Questions connexes

De nouvelles questions

javascript