Блог

Я использую React и Formik. У меня установлены начальные значения.

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

Отдел и категория — это меню пользовательского интерфейса, зависящие друг от друга. Если пользователь выбирает значение из отдела, то связанные категории будут обновлены.

Новое мы получаем новые начальные значения из api следующим образом

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

Значения устанавливаются для обоих меню. но категория не заполняется, поскольку ее данные заполняются при смене отдела. Как инициировать изменение, чтобы категории получали значения, и я мог установить данные, которые я получил из api.
Formik код

 <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 amp;amp; 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 amp;amp; departmentList.map((department, index) => {
                                return (
                                    <MenuItem key={index} value={department.Department}>{department.Department}</MenuItem>
                                )
                            })}

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

                    </FormControl>

                </Grid>

                <Grid item lg={4} xs={12}>
                    <FormControl className={classes.fullWidth} error={Boolean(errors.Category amp;amp; touched.Category)}>
                        <InputLabel id="Category">Category</InputLabel>
                        <Select
                            name="Category"
                            labelId="Category"
                            id="Category"
                            onChange={handleChange}
                            fullWidth
                            value={values.Category}
                        >
                            {categoryList amp;amp; categoryList.map((category, index) => {
                                return (
                                    <MenuItem key={index} value={category.Category}>{category.Category}</MenuItem>
                                )
                            })}
                        </Select>
                        <FormHelperText className={classes.error}>{(errors.Category amp;amp; touched.Category) amp;amp; 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 amp;amp; <CircularProgress size={24} className={classes.buttonProgress} />}
                    </div>

                </Grid>

            </Grid>

        </Form>)}

</Formik>