reactjs / reactjs/react.dev

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

Aberta
#7,167 0 comentários 1 reação 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

bug: unconfirmed
Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
1d 11h
PRs com merge (30d)
11

Descrição

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.

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece pela seção vinculada “Handling return values in forms” na página use-server e compare o exemplo de useActionState com a documentação vinculada de useActionState. Atualize o exemplo de requestUsername para que seus argumentos correspondam à assinatura de ação documentada e, em seguida, verifique se o exemplo da documentação compila.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react
Domínio
documentation
Tipo de issue
Documentação
Dificuldade
1/5
Tempo estimado
Menos de uma hora
Status de atividade
Estagnada
Clareza
Claramente especificada
Facilidade para iniciantes
45/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.