带有条件渲染的挂钩的使用

Question

我有一个用于创建课程的多步骤页面。基本上UI看起来像这样

每个步骤都是一个单独的组件。渲染代码如下：

const getStepContent = step => {
    if (isRequesting)
        return (
            <React.Fragment>
                <Skeleton height={40} variant="text" />
                <Skeleton height={40} variant="text" />
                <Skeleton height={40} variant="text" />
            </React.Fragment>
        )
    switch (step) {
        case 0:
            return (
                <CourseBasicInfo
                    onInputChange={onInputChange}
                    onSelectChange={onSelectChange}
                    onAutoCompleteChange={onAutoCompleteChange}
                    values={{
                        name: values.name,
                        fieldEids: values.fieldEids,
                        categoryEids: values.categoryEids,
                        agesFrom: values.agesFrom,
                        agesTo: values.agesTo,
                        type: values.type
                    }}
                    errors={errors}
                    touched={touched}
                    t={t}
                    isSubmitting={isSubmitting}
                    categories={categories}
                    setFieldTouched={setFieldTouched}
                    setFieldValue={setFieldValue}
                    handleChange={handleChange}
                />
            )
        case 1:
            return (
                <FormikEditor
                    name="description"
                    key="description"
                    errors={errors}
                    touched={touched}
                    onChange={onEditorChange}
                    value={values.description}
                />
            )
        case 2:
            return (
                <FormikEditor
                    name="prerequisites"
                    key="prerequisites"
                    errors={errors}
                    touched={touched}
                    onChange={onEditorChange}
                    value={values.prerequisites}
                />
            )
        case 3:
            return (
                <FormikEditor
                    name="topics"
                    key="topics"
                    errors={errors}
                    touched={touched}
                    onChange={onEditorChange}
                    value={values.topics}
                />
            )
        default:
            return 'Unknown step'
    }
}

我在CourseBasicInfo内使用钩子，一旦用户按下，下一个按钮索引就会增加1，因此下一步应该呈现。但是相反，我得到error表示钩子有问题。
令人惊讶的部分是：仅在项目构建后，才在本地不会遇到此错误。

是否有使用挂钩和条件渲染的解决方法？