transform method in useForm hook doesn't work

[aviemet]

Version:

• @inertiajs/react version: 1.0.9

Describe the problem:

I'm re-reporting an issue which was closed in the recent reset of issues, the original is #1131

When using useForm from the React package, the transform method doesn't work. The method is defined in the body of the useForm component, and thus is re-initialized upon re-renders to be the original "placeholder" method.

The transform method needs to be memoized in some way. I submitted #1491 which I've tested and it addresses this issue. It stores the transform method in a ref so that when it's value is updated it persists through re-renders.

[saeidalidadi]

I fixed this using a ref hook.

const transformRef = useRef({} as any);
useEffect(() => {
       transformRef.current = (data: any) => {};
       transform(transformRef.current)
});

[qMaDMaNp]

v1.0.11 - the problem persists. If no changes have been made to the form fields, the transform() method is ignored thus not being called. =(

[Zagoman]

This problem still persists

[aviemet]

Nearly 3 years and this very basic error still persists. It genuinely makes me fear for the longevity of this amazing project. Inertia is the glue that binds the frontend and backend together and is exactly how I want to build projects, I really hope this isn't a foretelling of an eventual death of the project.

For anyone who needs a quick drop-in, I've built out a replacement for useForm which fixes the transform bug, and also adds a few other features. Please feel free to use it, improve it, steal it, etc. Hopefully one day it won't be necessary.

[rossity]

@reinink @jessarcher can we get a confirmation you are aware of this bug and that there is a PR open for it? I'm not sure why this bug has been ignored for years now. It's core functionality to one of the best features of this library.

https://github.com/inertiajs/inertia/pull/1718

[ThePlatinum]

Surprisingly, it was working fine for me until I made an update and it stopped working, I undid all the changes and it still not working.

[dac514]

I fixed this using a ref hook.

const transformRef = useRef({} as any);
useEffect(() => {
       transformRef.current = (data: any) => {};
       transform(transformRef.current)
});

Allo! Can anyone reading explain this code snippet for me?

I tried it, and variations thereof, all it did was clear all data on every submit. 😕

I've been looking into this for a few hours and here's a summary of what I think I understand so far:

1. That code snippet above can allegedly work around problem.
2. This PR looks similar to the code snippet but is deeper: https://github.com/inertiajs/inertia/pull/1718
3. This package could also work: https://github.com/aviemet/useInertiaForm

As much as option 3 is great, kudos to the dev!, for me, it would be most interesting to get option 1 working, a temporary patch as we faithfully await option 2 to be merged.

More hints for idea 1 please? Thanks.

[dac514]

Following up on using saeidalidadi's snippet. I got something working.

Before:

transform((data) => {
    // REPLACE ME: your transform routine goes here
    return data
});

After:

import { useRef, useEffect } from 'react';
// ...
const transformRef = useRef({} as any);
useEffect(() => {
       transformRef.current = (data: any) => {
           // REPLACE ME: your transform routine goes here
           return data
       };
       transform(transformRef.current)
}, [data]);

Then, add onChange={(e) => setData('REPLACE_ME', e.target.value)} in as many places as possible to trigger re-renders so that your routine gets reloaded if ever it were to be replaced by the original inertia.js placeholder code.

[NaungYeHtet]

Surprisingly, it was working fine for me until I made an update and it stopped working, I undid all the changes and it still not working.

Same here. First it is working perfectly fine until I make some modification to the code. But undo changes is not helping either.

One thing I noticed that it is working after the code has an error and fix it. But It is not working after refresh.

[threesil]

@reinink Why isn't this bug fixed? The bug exists already for ages and it's really annoying that the transform method isn't working properly.