Formik不会改变图像URL的变化

问题描述

我有一个名为 Category.js 的组件。该组件用作添加类别和更新类别。这是更新类别的图片。

现在保存更改按钮已禁用。没关系，因为我什么都没做。如果我更改名称或描述按钮，请启用。但是当我更改图像时，它不会启用我。图像的值绑定到名为activeImage的变量，我也更改了Formik之外的变量的值。

这是我的组件代码。

<CardContent>
                        <Formik
                            enableReinitialize
                            initialValues={initialValues}
                            onSubmit={confirm}
                            validationSchema={validationSchema}
                        >
                            {({ errors,dirty,handleReset,touched,handleChange,values,handleBlur,isValid }) => {
                                return (
                                    <Form>
                                        <Grid container spacing={2}>
                                            <Grid item md={12}>
                                                {isUpdate ? (
                                                    <Typography variant="h5">{t('Update category')}</Typography>
                                                ) : (
                                                    <Typography variant="h5">{t('Add category')}</Typography>
                                                )}

                                            </Grid>
                                            <Grid item md={12}>
                                                <TextField
                                                    label={t('Item category name')}
                                                    variant="outlined"
                                                    fullWidth
                                                    name="itemName"
                                                    value={values.itemName}
                                                    onChange={handleChange}
                                                    onBlur={handleBlur}
                                                    error={Boolean(errors.itemName)}
                                                    required
                                                    helperText={errors.itemName && touched.itemName && errors.itemName}
                                                />
                                            </Grid>
                                            <Grid item md={12}>
                                                <TextField
                                                    label={t('Item Category Description')}
                                                    variant="outlined"
                                                    fullWidth
                                                    name="description"
                                                    value={values.description}
                                                    onChange={handleChange}
                                                    onBlur={handleBlur}
                                                    error={Boolean(errors.description)}
                                                    helperText={
                                                        errors.description && touched.description && errors.description
                                                    }
                                                />
                                            </Grid>

                                            <Grid item md={12}>
                                                <label htmlFor="upload-photo">
                                                    
                                                    <input
                                                        style={{ display: 'none' }}
                                                        id="upload-photo"
                                                        type="file"
                                                        onChange={handleImageAsFile}
                                                    />

                                                    <Button
                                                        color="secondary"
                                                        variant="contained"
                                                        component="span"
                                                        size="small"
                                                        className={classes.margin}
                                                    >
                                                        {t('Upload Image')}
                                                    </Button>
                                                </label>
                                            </Grid>

                                            {initialValues.activeImage && (
                                                <Grid item md={12}>
                                                    <img
                                                        width="200px"
                                                        src={initialValues.activeImage}
                                                        alt="Category image"
                                                    />
                                                    <Button
                                                        variant="contained"
                                                        mt={3}
                                                        className={classes.margin}
                                                        onClick={() => deleteImage()}
                                                    >
                                                        delete image
                                                    </Button>
                                                </Grid>
                                            )}

                                            <Grid item md={12}>
                                                {isImageUploading ? (
                                                    'Please wait image is uploading...'
                                                ) : (
                                                    <div className={classes.buttonMargin}>
                                                        {isUpdate ? (
                                                            <Button
                                                                color="secondary"
                                                                variant="contained"
                                                                disabled={!dirty || !isValid}
                                                                type="submit"
                                                                className={classes.white}
                                                            >
                                                                save changes
                                                            </Button>
                                                        ) : (
                                                            <Button
                                                                color="secondary"
                                                                variant="contained"
                                                                disabled={!dirty || !isValid}
                                                                type="submit"
                                                                className={classes.white}
                                                            >
                                                                {t('Save')}
                                                            </Button>
                                                        )}
                                                        
                                                        <Button variant="outlined" onClick={() => handleReset()}>
                                                            {t('Clear')}
                                                        </Button>
                                                    </div>
                                                )}
                                            </Grid>

                                            <Grid item md={12} className={classes.grow}>
                                                {isAlert && (
                                                    <Alert variant="filled" severity={alertType}>
                                                        {alertMessage}
                                                    </Alert>
                                                )}
                                            </Grid>
                                        </Grid>
                                    </Form>
                                );
                            }}
                        </Formik>

这是我传递给表格的状态

const [initialValues,setinitialValues] = useState({
        itemName: '',activeImage: '',description: ''
    });

但是activeImage在formik内的任何地方都没有提及。我在formik之外更改它。我认为，即使我通过了activeImage的验证，Yup验证模式，formik也无法识别activeImage的值。

const validationSchema = Yup.object().shape({

        itemName: Yup.string().required('required').max(15,'Maximum length for the name is 15'),activeImage: Yup.string().max(255,'Maximum length for the name is 255').nullable(true),description: Yup.string().max(30,'Maximum length for the name is 30')
    }); 

我该如何解决？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）