How to integrate useForm and useUndoable?

[vaynevayne]

Does the following code work? like https://mantine.dev/form/use-form/

There's a bug in the way it works.

1. redo undo -> useEffect form.values -> setCount // cause rerender
2. redo , has bug

  const form = useForm({
    initialValues: initialValues,
  })

const [count, setCount, { undo, redo, past, canRedo, canUndo, future }] =
    useUndoable(initialValues)

  useEffect(() => {
    setCount(form.values)
    console.log('form.values', form.values)
  }, [form.values])

  console.log('当前values', form.values)

  const onUndo = () => {
    if (!canUndo) return
    const nextState = past.at(-1)
    if (!nextState) return

    undo()
    console.log('onUndo', nextState)

    form.setValues(nextState)
  }
  console.log('past', past)

  console.log('future', future)

  const onRedo = () => {
    if (!canRedo) return
    const nextState = future.at(-1)
    if (!nextState) return
    redo()

    form.setValues(nextState)
  }

https://github.com/xplato/useUndoable/assets/124666577/3459b78a-54d8-4b11-8b08-0cf4d14a7dc0

[xplato]

Hi @vaynevayne! I apologize for the delay in my getting to this issue. Would you possibly be able to create a Codesandbox (or alternative) so that I can debug this?

Off the top of my head, I'd say this could potentially be problematic due to to multiple state instances being used (useUndoable as one, useForm as the other). There's a bit more info in the README in the React Flow section: https://github.com/xplato/useUndoable#integration-with-react-flow-v10

[xplato]

Closing due to inactivity