基于第一个选择值动态地第二个字段选择值

Question

我正在使用React和Formik。我设置了初始值。

initialValues={{
                    Department: "",
                    Category: "",
}}

部门和类别是相互依赖的重要ui菜单。如果用户从“部门”中选择一个值，则“相关”类别将被更新。

新的，我们从api这样获得新的初始值

initialValues={{
                    Department: "IT",
                    Category: "Forgot Password",
}}

两个菜单都设置了值。但由于部门更改时正在填充其数据，因此未填充类别。如何触发更改，以便类别将获取值，并且我可以设置从api获取的数据。 格式代码

<Formik
    enableReinitialize={true}
    initialValues={{
        Department: "IT",
        Category: "Forgot Password",

    }}

    innerRef={formRef}
    validateOnChange={true}
    validateOnBlur={false}
    validate={values => { }}
>
    {({ values, touched, errors, handleChange, handleBlur, isValid, setFieldValue }) => (


        <Form noValidate autoComplete="off" >

            <Grid container spacing={3}>
                <Grid item lg={4} xs={12}>
                    <FormControl className={classes.fullWidth} error={Boolean(errors.Department && touched.Department)}>
                        <InputLabel id="Department">Department</InputLabel>
                        <Select
                            name="Department"
                            labelId="Department"
                            id="Department"
                            onChange={(e, value) => {
                                setFieldValue('Department', value === null ? "" : value.props.value);
                                setFieldValue('Category', "");
                                departmentChange(value.props.value);
                            }}

                            fullWidth
                            value={values.Department}
                        >

                            {departmentList && departmentList.map((department, index) => {
                                return (
                                    <MenuItem key={index} value={department.Department}>{department.Department}</MenuItem>
                                )
                            })}

                        </Select>
                        <FormHelperText className={classes.error}>{(errors.Department && touched.Department) && errors.Department}</FormHelperText>

                    </FormControl>

                </Grid>

                <Grid item lg={4} xs={12}>
                    <FormControl className={classes.fullWidth} error={Boolean(errors.Category && touched.Category)}>
                        <InputLabel id="Category">Category</InputLabel>
                        <Select
                            name="Category"
                            labelId="Category"
                            id="Category"
                            onChange={handleChange}
                            fullWidth
                            value={values.Category}
                        >
                            {categoryList && categoryList.map((category, index) => {
                                return (
                                    <MenuItem key={index} value={category.Category}>{category.Category}</MenuItem>
                                )
                            })}
                        </Select>
                        <FormHelperText className={classes.error}>{(errors.Category && touched.Category) && errors.Category}</FormHelperText>
                    </FormControl>

                </Grid>

                <Grid item lg={12} xs={12} align="right">

                    <div className={classes.wrapper}>
                        <Button
                            className={classes.button}
                            type="submit"
                            color="primary"
                            variant="contained"
                            disabled={showButtonLoader}
                        >
                            submit
                    </Button>
                        {showButtonLoader && <CircularProgress size={24} className={classes.buttonProgress} />}
                    </div>

                </Grid>

            </Grid>

        </Form>)}

</Formik>