[Bug]: Example given in "Handling return values in forms" section for "use-server" docs fails to compile

オープン
#7,167 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
1/5
見積もり時間
1時間未満
初心者へのやさしさ
45/100
issue の種類
ドキュメント
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
javascript, react
領域
documentation

調査の方向性

use-server ページにあるリンク先の「Handling return values in forms」セクションから始め、そこにある useActionState の例を、リンク先の useActionState ドキュメントと比較します。requestUsername の例を更新して、その引数がドキュメントに記載されたアクションシグネチャと一致するようにし、その後、ドキュメントの例がコンパイルできることを確認します。

索引モデルが issue の本文から書いたものです。

説明

bug: unconfirmed
Summary

The following example is given in Handling return values in forms section for "use server" docs, fails to compile.

// requestUsername.js
'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  // ..
}
// UsernameForm.js
'use client';

import { useActionState } from 'react';
import requestUsername from './requestUsername';

function UsernameForm() {
  const [state, action] = useActionState(requestUsername, null, 'n/a');
  // ..
}
Page

https://react.dev/reference/rsc/use-server#handling-return-values

Details

It fails to compile because, as per the useActionState docs,

useActionState(action, initialState, permalink?)

the "action" (requestUsername in this case) should have previousState as the first argument,
and formData as the second argument.

However, for the above example, the requestUsername action has formData as the first argument,
rather than previousState. Therefore, it fails to compile.

The following is the correct way mentioned in the useActionState docs:

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useActionState(increment, 0);
  // ..
}

I can raise a PR for the fix, if it's okay.

主要言語
JavaScript
スター
11.8k
フォーク
7.9k
平均マージ
16時間 6分
マージ済み PR(30日)
7

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

reactjs/react.dev のほかの issue

reactjs/react.dev の issue をすべて見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。