javascript - React 19 hook - useActionState with checkbox - Stack Overflow

admin管理员组

文章数量:1405114

I have a simple React app.

It has one checkbox.

The checkbox value is sent to the server, which validates the value and sends a response. The response should update the React form state. In the simplified example below, the "server" just "echoes" the checkbox value.

Here is code:

import React, { useActionState, useEffect, useState } from "react";

async function handle(
  currState: boolean,
  queryData: FormData
): Promise<boolean> {
  // emulate server validation
  const response = await (async () => {
    await new Promise((resolve) => {
      setTimeout(resolve, 500);
    });
    return queryData.get("foo") === "on";
  })();
  return response;
}

function Checkbox({ state }: { state: boolean }): React.JSX.Element {
  const [value, setValue] = useState(state);
  useEffect(() => {
    if (typeof state === "boolean") {
      setValue(state);
    }
  }, [state]);
  return (
    <>
      <label htmlFor="foo-id">Foo</label>
      <input
        id="foo-id"
        type="checkbox"
        checked={value}
        onChange={() => {
          setValue(!value);
        }}
        name="foo"
      />
    </>
  );
}

function App(): React.JSX.Element {
  const [formState, formAction, isPending] = useActionState(handle, true);

  return (
    <div>
      <form action={formAction} noValidate>
        <Checkbox state={formState} />
        <button style={{ display: "block" }} disabled={isPending} type="submit">
          Send
        </button>
      </form>
    </div>
  );
}

export default App;

Here is working example

When the checkbox is checked and the "server" responds with true, everything works fine. The checkbox stays checked.

But why, when I uncheck the checkbox, then click the send button, does the checkbox automatically get checked again, even if the "server" responds with false?

I have no idea why it behaves this way.

I have a simple React app.

It has one checkbox.

The checkbox value is sent to the server, which validates the value and sends a response. The response should update the React form state. In the simplified example below, the "server" just "echoes" the checkbox value.

Here is code:

import React, { useActionState, useEffect, useState } from "react";

async function handle(
  currState: boolean,
  queryData: FormData
): Promise<boolean> {
  // emulate server validation
  const response = await (async () => {
    await new Promise((resolve) => {
      setTimeout(resolve, 500);
    });
    return queryData.get("foo") === "on";
  })();
  return response;
}

function Checkbox({ state }: { state: boolean }): React.JSX.Element {
  const [value, setValue] = useState(state);
  useEffect(() => {
    if (typeof state === "boolean") {
      setValue(state);
    }
  }, [state]);
  return (
    <>
      <label htmlFor="foo-id">Foo</label>
      <input
        id="foo-id"
        type="checkbox"
        checked={value}
        onChange={() => {
          setValue(!value);
        }}
        name="foo"
      />
    </>
  );
}

function App(): React.JSX.Element {
  const [formState, formAction, isPending] = useActionState(handle, true);

  return (
    <div>
      <form action={formAction} noValidate>
        <Checkbox state={formState} />
        <button style={{ display: "block" }} disabled={isPending} type="submit">
          Send
        </button>
      </form>
    </div>
  );
}

export default App;

Here is working example https://codesandbox.io/p/sandbox/8dsr6y

When the checkbox is checked and the "server" responds with true, everything works fine. The checkbox stays checked.

But why, when I uncheck the checkbox, then click the send button, does the checkbox automatically get checked again, even if the "server" responds with false?

I have no idea why it behaves this way.

• javascript
• reactjs

Share Improve this question Follow edited Mar 24 at 15:33 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Mar 24 at 14:41 m51m51 2,0221818 silver badges2626 bronze badges 1

• 1 I would recommend removing the local state from the checkbox and using defaultChecked={state} instead. – evolutionxbox Commented Mar 24 at 14:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I believe this is a bug with React, that the controlled checkbox and select gets reset when the form is submitted with the action prop.

You can avoid automatic form reset by calling your action inside a startTransition in the form onSubmit callback.

Working code

<form
    onSubmit={(event) => {
    event.preventDefault();
    const form = event.currentTarget;
        startTransition(() => {
            formAction(new FormData(form));
        });
    }}
    noValidate
    >
    <Checkbox state={formState} />
    <button style={{ display: "block" }} disabled={isPending type="submit">Send</button>
</form>

本文标签： javascriptReact 19 hookuseActionState with checkboxStack Overflow