ホームページ >ウェブフロントエンド >jsチュートリアル >Reactサーバーの機能
サーバー関数は、クライアント上で参照され、サーバー上で実行される関数です。
これが例です:
'use client' import { useActionState } from "react"; import { updateName } from "@/app/react-19-server-function/actions"; export default function Page() { const [error, submitAction, isPending] = useActionState( async (_previousState, formData) => { const error = await updateName(formData.get("name") as string); if (error) { return error; } return "" }, "", ); return <div> <h1>React 19: Server Functions</h1> <fieldset> <div>Name</div> <form action={submitAction}> <input type="text" name="name" /> <button type="submit" disabled={isPending}>Save</button> </form> <div> {error && <p>{error}</p>} </div> </fieldset> </div> }
useActionState の詳細については、以前の投稿を確認してください
updateName がどのようにインポートされるかに注目してください。
import { updateName } from "@/app/react-19-server-function/actions";
そして useActionState.
に渡されます。これは、フォームが送信されるたびに submitAction が実行され、その後 updateName が呼び出されるという意味です。
それでは、updateName:
をチェックしてみましょう。
"use server"; export async function updateName(name) { if (name?.length < 2) { return "Name must be at least 2 characters."; } return ""; }
名前の長さをチェックする非常にシンプルな関数です。 2 文字未満の場合はエラーが返されます。それ以外の場合は、エラーがないことを意味する空の文字列を返します。
もう 1 つ注意すべき点は、「サーバーを使用する」というディレクティブです。これにより、関数がサーバー上で実行されることが React に伝えられ、クライアントが使用できる参照が作成されます。
UI は非常に簡単で、次のようになります。
フォームが値なしで送信されると、いくつかの興味深い詳細を含む POST ネットワーク リクエストが表示されます。
サーバー関数は、サーバー上で実行される関数です。別の方法は、フェッチを手動で使用してバックエンドにリクエストを行い、ステータス コードの読み取りやペイロードの解析などの処理を行うことです。
サーバー機能を使用すると、通信部分について心配する必要がなくなります。 「use server」ディレクティブを使用して関数を作成し、それをクライアント ファイルにインポートするだけで、残りはフレームワークが処理します。
以上がReactサーバーの機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。