如何在 React Final Form 之外管理状态？

Question

I want to store the state of my React Final Form somewhere. Right now that is in a React Hook. I'm currently using useMethods , similar to useState .

The form I currently have is part of a multi-step process, and when I navigate to another page which the form is not on, it is unmounted (of course). When re-mounted, I want to provide the form with initial values (available here ).

The problem is that when my state changes the form re-renders and I always end up in an endless loop, because:

• The FormSpy stores changes in the form
• The state is changed
• Form is re-rendered
• The FormSpy stores changes in the form
• And so on...

I also have a problem that when initial values are provided, the field state is not populated (dirty, touched, etc.), so the form looks strange when re-mounted because some of the labels are tied to the meta fields. It seems like we need some kind of way to store all of the form state, not only the values as the component which contains the Form can unmount and re-mount n number of times.

What I want:

• Changes to immediately to be stored in my state
• Re-renders somehow remember (I can store this in my own state if needed) the touched, dirty, etc. state

My starting point was to look at Auto-save with Debounce (although I don't need to debounce, since I'm storing it locally).

What is the best way to handle this?

Answer 1

Always fascinated to discover a use case I'd never have considered. Since react-final-form@6.1.0 , you can now provide your own final-form form instance, via the form prop . This, if stored at a higher place in the tree – with a useRef() , probably – might let you maintain form state for longer? 🤔

Just a guess. Do report back if it works...

Answer 2

I just had a similar issue, and manged to create a decorator that remembers the touched (or any other field state) and then re applies that state when the field is mounted again. One major issue is that this causes a flicker as the field is rendered not touched on mount, then the decorator is notified, then the field is rendered touched.

Some example code (not tested):

function decorator(form) {
  const storedTouched = {};
  return form.subscribe(({touched}) => {
    for(const field of Object.keys(touched)) {
      if(touched[field]) {
        storedTouched[field] = true;
      }
    }
    for(const field of Object.keys(storedTouched)){
      if(touched[field] === false) { // check against false since unregistered fields are undefined
        form.mutators.setFieldTouched(field, true);
      }
    }
  }, {touched: true});
}

You could also expose the storedTouched to allow setting any field touched, not just those that are already mounted/registered. (eg initialize it to the fields that were already touched last time)