我有一个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限制了渲染数量以防止无限循环。”
最好的方法是什么?