final-form / react-final-form-arrays

A component for rendering and editing arrays 🏁 React Final Form
MIT License
205 stars 70 forks source link

`useFieldArray`: `mutators` always take name from closure of the first render. #171

Closed ddgrishkin closed 2 years ago

ddgrishkin commented 2 years ago

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

When I update a first argument name of the hook useFieldArray, methods push and remove work incorrectly (suspect that others work the same way): they always reference to the value of argument name that was provided into useFieldArray at the first render. That's why elements aren't added and removed for an actual value of the name.

What is the expected behavior?

Elements should be added and removed from actual value of the argument name.

Sandbox Link

https://codesandbox.io/s/react-final-form-arrays-report-qjlneq

Other information

That's happening because mutators are returned by the useConstant hook only at the first render, and variable name is always taken from a closure of the first call.

const mutators = useConstant<Mutators>(() =>
    // curry the field name onto all mutator calls
    Object.keys(formMutators).reduce((result, key) => {
      result[key] = (...args) => formMutators[key](name, ...args)
      return result
    }, {})
  )

https://github.com/final-form/react-final-form-arrays/blob/303bdce913e5527ad8039554de8f15830d29922d/src/useFieldArray.js#L34

I could fix it with useMemo. What do you think of it?

erikras commented 2 years ago

Published fix in v3.1.4.