如何重置react js中useFormState返回的状态？

Question

首先这是我在react中的代码

import { useFormState, useFormStatus } from 'react-dom'
import { submitAction } from './action.ts'

export default function Calculator() {
  const [result, submitAction] = useFormState(submitForm, null)

  return (
   <>
    <form action={submitAction}>
      [input fields]

      <button type="reset">
        Reset
      </button>
      <CalculateButton />
    </form>

    <Table headers={inputsCols}>
        {result ? (
          Object.entries(result).map(([rowKey, rowData], rowIndex) => (
            <TableRow key={rowIndex}>
              <TableCell key={rowKey} className="font-bold">
                {rowKey}
              </TableCell>

              {Object.entries(rowData).map(([dataKey, dataValue]) => (
                <TableCell key={`${rowKey}-${dataKey}`}>{dataValue}</TableCell>
              ))}
            </TableRow>
          ))
        ) : (
          <TableRow>
            <TableCell colSpan={inputsCols.length}>No data available</TableCell>
          </TableRow>
        )}
      </Table>
    </>
  )
}

function CalculateButton() {
  const { pending } = useFormStatus()

  return (
    <Button
      type="submit"
      color="orange"
      disabled={pending}
      icon={pending ? LoadingIcon : undefined}
    >
      Calculate
    </Button>
  )
}

我正在尝试使用反应服务器操作来提交表单，并且我想重置

1. 表单状态和
2. 服务器操作返回的结果

当用户单击重置按钮时。

第一件事在表单内使用按钮 type="reset" 工作正常，但对于第二件事我不太确定应该如何做。

那么，如何重置react js中useFormState返回的状态？ 更新 UI，以便用户可以输入一些其他数据并进行其他计算。

Answer 1

似乎没有办法从渲染表单的组件内重新初始化表单状态。

export default function Calculator({ onReset }) {
  const [result, submitAction] = useFormState(submitForm, null)

  return (
   <>
    <form action={submitAction} onReset={onReset}>
      ...input fields...

      <button type="reset">
        Reset
      </button>
      <CalculateButton />
    </form>

    ...
    </>
  )
}

使用某种状态来表示“表单键”，以便您可以提供新的 React 键并有效地重新挂载具有初始状态的

Calculator

组件。

const [formKey, setFormKey] = React.useState(() => nanoid());

const updateFormKey = () => setFormKey(nanoid());
...

<Calculator key={formKey} onReset={updateFormKey} />

基本演示

const submitForm = (previousState, formData) => {
  console.log({ previousState });
  return previousState + 1;
};

function Calculator({ onReset }) {
  const [result, submitAction] = ReactDOM.useFormState(submitForm, 0);

  return (
    <React.Fragment>
      <form action={submitAction} onReset={onReset}>
        <div>Result: {result}</div>

        <button type="reset">
          Reset
        </button>
        <CalculateButton />
      </form>
    </React.Fragment>
  );
}

function CalculateButton() {
  const { pending } = ReactDOM.useFormStatus()

  return (
    <button
      type="submit"
      disabled={pending}
    >
      Calculate ({pending ? "loading" : "idle" })
    </button>
  );
}

const App = () => {
  const [formKey, setFormKey] = React.useState(0);

  const updateFormKey = () => setFormKey(key => key + 1);
  return <Calculator key={formKey} onReset={updateFormKey} />;
};

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.0-canary-cb2439624-20231219/umd/react.development.min.js" integrity="sha512-DyF9mlaay3VPTJNySTYIgb2dsv0NXOcY/IRkCFm/1J/w4B3oOXA6LGwS04cgMFHcSB5b7WXqbOsBaAsWsvcj8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.0-canary-cb2439624-20231219/umd/react-dom.development.min.js" integrity="sha512-kkJ9iTzcc6cLoFeK+Kp13xvLpIa/+if1NSX7R1ThvHgw6VccDudy8qb5FGyismOvnaGfI604s7ZD6Rzu4Awpng==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="root" />