Data APIs

useSubmissions

这个辅助函数用于处理表单提交，可以在操作进行时提供乐观更新以及待处理状态的反馈。此方法将返回组件挂载期间所有已提交操作的可迭代对象。可以使用可选的第二个参数作为过滤函数。

tip:

如果你只关心最新的提交，可以使用 useSubmission 辅助函数。

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

在下面的示例中，useSubmissions 辅助函数用于保留该操作的所有提交结果列表，同时还提供当前正在进行的提交的待处理状态反馈。

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

function Component() {
  const submissions = useSubmissions(postNameAction);

    return (
      <form method="post" action={postNameAction}>
        <ul>
          <For each={Array.from(submissions.entries())}>
            {([attemptIndex, data]) => (
                <Show when={data.result}>
                    { result => (
                        <li>
                            Backend {attemptIndex}: {result.name}
                        </li>
                    )}
                </Show>
              </>
            )}
          </For>
        </ul>
        <input name="name" type="text" />
        <button type="submit">{submissions.pending ? "发送中" : "发送"}</button>
      </form>
    )
}

创建操作

触发提交的 Action 应该使用 action() 辅助函数创建，当在 SolidStart 应用中时。如果在 SolidStart 应用中，可以利用服务器端的缓存和 RPC 功能。

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

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

过滤提交

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

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

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

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

  return (
    <form method="post" action={postNameAction}>
        <ul>
            <For each={Array.from(submissions.entries())}>
                {([attemptIndex, data]) => (
                    <Show when={data.result}>
                        { result => (
                            <li>
                                Backend {attemptIndex}: {result.name}
                            </li>
                        )}
                    </Show>
                </>
                )}
            </For>
        </ul>
        <input name="name" type="text" />
        <button type="submit">{submissions.pending ? "发送中" : "发送"}</button>
      </form>
  )
}

乐观更新

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

错误处理

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

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

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

function Component() {
  const submissions = useSubmissions(postNameAction);

    return (
      <form method="post" action={postNameAction}>
        <ul>
          <For each={Array.from(submissions.entries())}>
            {([attempt, data]) => (
              <Show when={data.error}>
                <li>
                  <p>Backend {attempt}: {data.error.message}</p>
                  <button onClick={() => data.retry()}>重试</button>
                  <button onClick={() => data.clear()}>清除</button>
                </li>
              </Show>
            )}
          </For>
        </ul>
        <input name="name" type="text" required autocomplete="off" />
        <button type="submit">{submissions.pending ? "发送中" : "发送"}</button>
      </form>
    )
}

报告此页面问题