重新渲染错误过多.将React Hooks与Stepper组件一起使用

Question

我有一个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>
)
}

我需要根据我的步骤道具设置属性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限制渲染次数以防止无限循环。">

最好的方法是什么？

Answer 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来自哪里，也许你也应该把它传给道具。

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