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?
1
fjurr
4 nov. 2019 à 22:04
2 réponses
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
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