Data APIs

useSubmission

这个辅助函数用于处理表单提交，可以在操作进行时提供乐观更新以及待处理状态的反馈。此方法将返回单个(最新的)值，而它的兄弟方法useSubmissions将返回组件活动期间提交的所有值。可以使用可选的第二个参数作为过滤函数。

需要注意的是，useSubmission要求表单方法必须是post，否则它将触发浏览器导航且无法工作。

import { useSubmission } from "@solidjs/router";

function Component() {
  const submission = useSubmission(postNameAction);

    return (
      <form action={postNameAction} method="post">
          <input type="text" name="name" />
          <button type="submit">
              {submission.pending ? "添加中..." : "添加"}
          </button>
      </form>
    )
}

创建action

触发提交的Action应该使用action()辅助函数创建，当在SolidStart应用中时，建议使用"use server"指令来利用服务器端的缓存和RPC功能。

import { action } from "@solidjs/router";

const postNameAction = action(() => {
  "use server";
  /*... 逻辑 ...*/
  return { data: "Hello SolidStart" };
})

过滤提交

作为可选的第二个参数，useSubmission辅助函数可以接收一个过滤函数，只返回匹配条件的提交。过滤器接收提交的数据作为参数，并应返回一个布尔值。例如：下面的action只有在名称为"solid"时才会提交。

import { useSubmission } from "@solidjs/router";

function Component() {
  const submission = useSubmission(postNameAction, ([formData]) => {
    const name = formData.get("name") ?? "";

    return name === "solid";
  });

    return (
      <form action={postNameAction} method="post">
          <input type="text" name="name" />
          <button type="submit">
              {submission.pending ? "添加中..." : "添加"}
          </button>
      </form>
    )
}

乐观更新

当表单提交时，submission对象将使用新值更新，并且pending属性将设置为true。这允许你向用户提供操作正在进行中的反馈。一旦操作完成，pending属性将设置为false，并且result属性将使用最终值更新。

错误处理

如果action失败，submission对象将更新错误信息，并且pending属性将设置为false。这允许你向用户提供操作失败的反馈。此外，useSubmission的返回类型将有一个新的键error，其中包含提交处理程序抛出的错误对象。

在这个阶段，你还可以使用retry()方法重试操作，或使用clear()清除平台中填充的数据。

import { Show } from "solid-js";
import { useSubmission } from "@solidjs/router";

function Component() {
  const submission = useSubmission(postNameAction);

    return (
      <>
        <Show when={submit.error}>
          {(error) => (
            <div>
              <p>错误: {error.message}</p>
              <button onClick={() => submit.clear()}>
                清除
              </button>
              <button onClick={async () => submit.retry()}>
               重试
              </button>
            </div>
          )}
        </Show>

        <form method="post" action={sendData}>
          <input type="text" name="name" required />
          <button type="submit" disabled={submission.pending}>
            {submission.pending ? "提交中" : "提交"}
          </button>
        </form>
      </>
    )
}

报告此页面问题