switch case 和 if else 在 Reactjs 中不起作用

Question

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

这就是我所做的：

我有一系列步骤如下：

    const steps = getSteps()

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

现在这是一个有 2 个按钮的步进器，一个是 Next 另一个是 Back，我传递数组步骤索引的按钮是 Next " 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>

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

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

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

Answer 1

将onClick={handleNext(index)} 更改为onClick={() => handleNext(index)}