Open zaosoula opened 2 months ago
Additional context: it happens after calling form.setFieldValue directly after useForm
watch(deps, () => {
form.setFieldValue('name', 'john doe')
})
but if i do this, it work
watch(deps, () => {
nextTick(() => {
form.setFieldValue('name', 'john doe')
}
})
however calling setFieldValue with { dontUpdateMeta: true } prevent the bug from happening
watch(deps, () => {
form.setFieldValue('name', 'john doe', { dontUpdateMeta: true })
})
Changes relative to this had been added by this commit: https://github.com/TanStack/form/commit/4e4a3ae12c3f2b3458ab1bd5f1beaf161f7b6995 (poke @crutchcorn)
I'll leave there the details of my debugging for context purpose, my final fixes was to remove the snippet mentioned above
const store = form.useStore();
Object.entries(store.value.values).forEach(([key, value]) => {
form.setFieldMeta(key, (prev) => ({
errorMap: {},
...prev,
}));
})
and always call setFieldValue with opts: { dontUpdateMeta: true }
(which is not documented and not mentioned in the releases notes)
If you are using dontUpdateMeta
you are almost 1000000% doing something wrong. There is a good reason it is not documented.
Please follow the issue template and provide a minimal reproduction, otherwise there's nothing we can do to help.
Might be a little late to the party but I ran into the same issue. It ended up being an onChange firing after the component unmounted. I ended up wrapping the onChange with a conditional check if a ref to that component was not null.
Like so:
onChange={(markdown) => {
if (mdxEditorRef.current) {
onChange(markdown);
}
}}
I also ran into an error that I think is related to this issue. I also was using setState and setMeta like this:
field.form.store.setState(x => ({
...x,
values: {
myValue: true,
myOtherValue: 12345
}
}))
field.setMeta(x => ({
...x,
isTouched: true
}))
While I am not sure that the above snippet is responsible, I was getting the following error stacktrace when I tried to reset the form (form.reset()
):
Uncaught TypeError: Cannot convert undefined or null to object
at Function.values (<anonymous>)
at Object.onUpdate (FieldApi.ts:470:1)
at Store.setState (index.ts:48:1)
at FieldApi.ts:528:1
at Store.batch (index.ts:64:1)
at FieldApi.ts:523:1
at index.ts:59:1
at Set.forEach (<anonymous>)
at Store._flush (index.ts:57:1)
at Store.batch (index.ts:68:1)Caused by: React ErrorBoundary TypeError: Cannot convert undefined or null to object
I was able to work around the issue by adding the following onMount callback to my field validator object, like so:
<form.Field
name="myValue"
validators={{
onMount: field => {
if (
!field.fieldApi.state.meta.errorMap
) {
field.fieldApi.state.meta.errorMap =
{}
}
return null
}
}}
>{/* Field display components */}</form.Field>
Any idea what could be causing this?
Sometimes when updating field i get error because the lib try to read "onServer"/"onChange" inside "errorMap" but "errorMap" is not defined
To prevent the error I added this snippet after calling "useForm"