У меня есть подключаемый компонент, который использует useFormik(), и это мои начальные значения:
const formik = useFormik({
initialValues: {login: '', password: '', inactive: false},
validationSchema: schema,
onSubmit: async (values, { resetForm }) => {
await dispatch(UserActions.createUser(values, resetForm))
},
})
Иногда у этого компонента уже есть данные, поэтому я пытаюсь проверить это в useEffect и установить к тому времени initialState :
const userEditing = useSelector(store => store.userStates.userEditing)
const [initialValues, setInitialValues] = useState('')
useEffect(() => {
if (userEditing) {
setInitialValues(userEditing)
} else {
setInitialValues({login: '', password: '', inactive: false})
}
}, []); // eslint-disable-line
и затем я пытаюсь поместить эту переменную в initialValues:
const formik = useFormik({
initialValues: initialValues,
validationSchema: schema,
onSubmit: async (values, { resetForm }) => {
await dispatch(UserActions.createUser(values, resetForm))
},
})
Входит в условие if(), но мои входные данные не заполняются этими значениями .
Как я могу передать существующие данные из моего магазина в formik?
Это мой шаблон:
<Grid item xs={5}>
<TextField
value={formik.values.login}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
helperText={formik.touched.login ? formik.errors.login : ""}
error={formik.touched.login && Boolean(formik.errors.login)}
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="E-mail"
name="login"
autoComplete="email"
/>
</Grid>
<Grid item xs={5}>
<TextField
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
helperText={formik.touched.password ? formik.errors.password : ""}
error={formik.touched.password && Boolean(formik.errors.password)}
variant="outlined"
margin="normal"
required
fullWidth
type="password"
id="password"
label="Senha"
name="password"
/>
</Grid>
<Grid item xs={2}>
<FormControlLabel
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.inactive}
control={<Switch color="primary" />}
label="Inativo"
labelPlacement="top"
/>
</Grid>