final-form / final-form/react-final-form-arrays
"Array mutators not found. You need to provide the mutators from final-form-arrays to your form" is thrown although array mutators are passed
- Dominant language
- TypeScript
- Stars
- 210
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Bug report
### What is the current behavior?
I have two routes, each containing a single `Form` (nothing more).
The first `Form` has no mutators, just an input `Field`.
The second `Form` is passed `arrayMutators` to `mutators` prop for its `FieldArray`.
When navigating from the first to the second route,
```
Array mutators not found. You need to provide the mutators from final-form-arrays to your form
```
is thrown, although the second form is passed `arrayMutators`.
### What is the expected behavior?
The second form renders normally.
### What seems to happen
It seems the second form is rendered using the first form ref, returned by `useConstant` ([here](https://github.com/final-form/react-final-form/blob/master/src/ReactFinalForm.js#L69)) (which is probably the root cause of this issue).
Then, `useWhenValueChanges` is called with mutators ([here](https://github.com/final-form/react-final-form/blob/master/src/ReactFinalForm.js#L153)), which will set the second form `mutators` config later using a side effect ([here](https://github.com/final-form/react-final-form/blob/4d37306f992fe79bdc303ea6ebd89d3b936a5c47/src/useWhenValueChanges.js#L10)).
The thing is, when `hasMutators` boolean is defined ([here](https://github.com/final-form/react-final-form-arrays/blob/master/src/useFieldArray.js#L28)) the side effect has not run yet.
### Sandbox Link
https://codesandbox.io/s/eager-sinoussi-405f2
### What's your environment?
React Final Form Arrays 3.1.1
Contributor guide
Assessment
This issue has not been assessed yet.