react-component / react-component/field-form
useForm does not return same FormInstance
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 286
- Avg merge
- 4d 16h
- Merged PRs (30d)
- 1
Description
- Tested on 1.25.2 up to 1.27.0
- Tested on React 17 and 18
- ViteJS 2.9+
Scenario
I'm having a modal. When opening it, we're fetching data and populating it into a form (form.setFields).
Pseudo:
const [form] = useForm();
// ...
useEffect(() => {
// having data here for sure...
form.setFields(data...)
}, [...])
// ...
return (
...
<Form form={form}>
....
</Form>
...
)
Actual Behavior
- Once the modal is loaded, the form is not populated. After double checking everything, we saw that
form.setFields(data...)has been called with the right data. - Pressing save on any related file in development (component refresh / rerender) will then populate the form correctly (without reloading the data from the server)
Expected Behavior
Populating the form immediately displays the information.
Analysis
We tried to figure out what the issue could be. To debug, we changed the code of useForm and Form to include a random number into the FormInstance. When logging the that data, we're getting the following:
log: useForm - has no "current"
log: useForm - build FormStore/FormInstance with random number
// Render of our component
log: ourComp - FORM: 0.8044077487840133
// Render of our component
log: ourComp - FORM: 0.9797179135137914
// ^ why do we get a new FormInstance here?
log: ourComp - populate data
// After this, every render displays `0.9797179135137914` although `0.8044077487840133` was the random of the first render
// Now refreshing one component by code refresh
// Render of our component
log: ourComp - FORM: 0.9797179135137914
// Render of our component
log: ourComp - FORM: 0.9797179135137914
log: ourComp - populate data
// Everything is displayed correctly, "0.8044077487840133" is gone.
Important to notice is, that useForm internally just calls once:
var formStore = new FormStore(forceReRender, Math.random());
formRef.current = formStore.getForm();
which is correct.
Now the question is, where the first instance is coming from? I think this is the part preventing a correct render in the first place. Our code populates the second instance. When forcing the component to rerender, it'll take the new (correct) FormInstance and everything will be fine afterwards.
I hope somebody got an idea. I'll continue to dig deeper.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the useForm and Form entry points described in the issue, then reproduce the modal data-population scenario with React 17 or 18 and the listed field-form versions. Compare the FormInstance across the initial renders and after form.setFields; done means the initial populated data is displayed without a development refresh.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100