final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.38k stars 480 forks source link

<Field> initialValue - not updating value from state #880

Open devstarman opened 3 years ago

devstarman commented 3 years ago

What is the current behavior?

  1. Include initialValue prop to component from state
  2. Changing state value
  3. Initial value rendered by Field is not changing

What is the expected behavior?

Initial value rendered by Field should be updated.

Sandbox Link

https://codesandbox.io/s/react-final-form-initialvalue-update-62din

What's your environment?

React Final Form version: "react-final-form": "^6.3.0" Final Form version: "final-form": "^4.18.5" OS/browser affected: Windows 10/Chrome

Other information

My current workaround is to use defaultValue on element rendered by but it's dirty because I get React warnings about mixing controlled and uncontrolled components.

yevgeniypopov commented 3 years ago

This issue still happens on latest version (4.20.2 and 6.5.3).

Workaround: initial value will render correctly if you will be passing this.state.initialValue via initialValues Form prop instead.

Here is Sandbox with initialValues - https://codesandbox.io/s/react-final-form-initialvalue-update-forked-b5elv

tyren1995 commented 3 years ago

The InitialValue prop on Field still doesn't work and using the initialValues on the form as a whole does not work for my use case . Please fix

tyren1995 commented 3 years ago

for anyone who can't get the above two examples to work for them : Another workaround is passing in form to your form rendering method, and then calling form.reset({}) whenever you need the values reset. I'll try to drop a sandbox with an example.

tyren1995 commented 3 years ago

Update once again - that last approach didn't work for me either as only new, nonzero values would be updated to their new value, and the rest instead of maintaining the same value (for example old was 0 and new is 0) would update to undefined. I ended up having to do a manual redirect to the same page with a persisted GET variable for the value to be sent to the API in order to get the new values for the form on each re-render