开关箱，如果在Reactjs中不工作

所以我有一个按钮“下一步”。我想根据用户所处的步骤更改其功能

这就是我所做的：

我有如下一系列步骤：

    const steps = getSteps()

    function getSteps() {
        return ['Select the dates', 'Choose the type of complaint', 'Select the supervisor'];
    }

现在这是一个有两个按钮的步进器，一个是下一个，另一个是返回，我传递数组步骤索引的按钮是下一个“handleNext（index）”，它告诉用户在哪个步骤上：

 <Stepper className={classes.stepperBg} activeStep={activeStep} orientation="vertical">
                    {steps.map((label, index) => (
                        <Step key={label}>
                            <StepLabel>{label}</StepLabel>
                            <StepContent>
                                <Typography>{getStepContent(index)}</Typography>
                                <div className={classes.actionsContainer}>
                                    <div>
                                        <Button
                                            disabled={activeStep === 0}
                                            onClick={handleBack}
                                            className={classes.button}
                                        >
                                            Back
                                        </Button>
                                        <Button
                                            variant="contained"
                                            color="primary"
                                            onClick={handleNext(index)}
                                            className={classes.button}
                                            disabled={nextButton}
                                        >
                                            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                                        </Button>
                                    </div>
                                </div>
                            </StepContent>
                        </Step>
                    ))}
                </Stepper>

{steps.map（（标签，索引）=>(
{label}
{getStepContent（索引）}
返回
{activeStep===steps.length-1？'Finish'：'Next'}
))}

这个函数根据步骤的索引处理下一步按钮的功能

function handleNext(index) {
        switch(index) {
            case 0:
                if (radioValue === 'one' && oneDate !== null) {
                        setReportData(
                            mainData.filter(
                                (obj) =>
                                    Moment(obj.date).format("DD MMM yyyy") === Moment(oneDate).format("DD MMM yyyy")
                            )
                        )

                        setActiveStep((prevActiveStep) => prevActiveStep + 1);


                } else {
                    if (fromDate !== null && toDate !== null) {

                        setReportData(
                            mainData.filter(
                                (obj) =>
                                    Moment(obj.date).format("DD MMM yyyy") >= Moment(fromDate).format("DD MMM yyyy") &&
                                    Moment(obj.date).format("DD MMM yyyy") <= Moment(toDate).format("DD MMM yyyy")
                            )
                        )
                        setActiveStep((prevActiveStep) => prevActiveStep + 1);


                    }
                }

                break
            case 1:
                return 'type selected'
            case 2:
                return 'supervisor selected'
            default:
                return null;
        }
    }

函数handleNext（索引）{
开关（索引）{
案例0：
如果（radioValue=='one'&&oneDate！==null）{
setReportData(
mainData.filter(
（obj）=>
时刻（目标日期）。格式（“DD MMM yyyy”）==时刻（oneDate）。格式（“DD MMM yyyy”）
)
)
setActiveStep（（prevActiveStep）=>prevActiveStep+1）；
}否则{
if（fromDate！==null&&toDate！==null）{
setReportData(
mainData.filter(
（obj）=>
时刻（目标日期）。格式（“DD MMM yyyy”）>=时刻（fromDate）。格式（“DD MMM yyyy”）&&
时刻（目标日期）。格式（“DD-MMM-yyyy”）前一步+1）；
}
}
打破
案例1：
返回“选择类型”
案例2：
返回“选定的主管”
违约：
返回null；
}
}

---

现在我得到的错误是React不能处理太多的渲染。我不知道如何解决这个问题。

将

onClick={handleNext（index）}

更改为

onClick={（）=>handleNext（index）}

你是救世主，谢谢！