diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 70feceaea..ba430ffb8 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -5,13 +5,13 @@ canary: true -The `useFormStatus` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +O Hook `useFormStatus` está atualmente disponível apenas nos canais Canary e experimentais do React. Saiba mais sobre [os canais de lançamento do React aqui](/community/versioning-policy#all-release-channels). -`useFormStatus` is a Hook that gives you status information of the last form submission. +O `useFormStatus` é um Hook que fornece informações de status da última submissão de formulário. ```js const { pending, data, method, action } = useFormStatus(); @@ -23,11 +23,11 @@ const { pending, data, method, action } = useFormStatus(); --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `useFormStatus()` {/*use-form-status*/} -The `useFormStatus` Hook provides status information of the last form submission. +O Hook `useFormStatus` fornece informações de status da última submissão de formulário. ```js {5},[[1, 6, "status.pending"]] import { useFormStatus } from "react-dom"; @@ -35,7 +35,7 @@ import action from './actions'; function Submit() { const status = useFormStatus(); - return + return } export default function App() { @@ -47,42 +47,42 @@ export default function App() { } ``` -To get status information, the `Submit` component must be rendered within a `
`. The Hook returns information like the `pending` property which tells you if the form is actively submitting. +Para obter informações de status, o componente `Submit` deve ser renderizado dentro de um ``. O Hook retorna informações como a propriedade `pending`, que indica se o formulário está em processo de submissão. -In the above example, `Submit` uses this information to disable ` ); } @@ -133,30 +133,30 @@ export async function submitForm(query) { -##### `useFormStatus` will not return status information for a `` rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/} +##### `useFormStatus` não retornará informações de status para um `` renderizado no mesmo componente. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/} -The `useFormStatus` Hook only returns status information for a parent `` and not for any `` rendered in the same component calling the Hook, or child components. +O Hook `useFormStatus` apenas retorna informações de status para um `` pai e não para qualquer `` renderizado no mesmo componente que chama o Hook, ou componentes filhos. ```js function Form() { - // 🚩 `pending` will never be true - // useFormStatus does not track the form rendered in this component + // 🚩 `pending` nunca será true + // useFormStatus não rastreia o formulário renderizado neste componente const { pending } = useFormStatus(); return ; } ``` -Instead call `useFormStatus` from inside a component that is located inside `
`. +Em vez disso, chame o `useFormStatus` de dentro de um componente que está localizado dentro do ``. ```js function Submit() { - // ✅ `pending` will be derived from the form that wraps the Submit component + // ✅ `pending` será derivado do formulário que envolve o componente Submit const { pending } = useFormStatus(); return ; } function Form() { - // This is the `useFormStatus` tracks + // Este é o que o useFormStatus rastreia return ( @@ -167,11 +167,11 @@ function Form() { -### Read the form data being submitted {/*read-form-data-being-submitted*/} +### Ler os dados do formulário que estão sendo submetidos {/*read-form-data-being-submitted*/} -You can use the `data` property of the status information returned from `useFormStatus` to display what data is being submitted by the user. +Você pode usar a propriedade `data` das informações de status retornadas pelo `useFormStatus` para exibir quais dados estão sendo submetidos pelo usuário. -Here, we have a form where users can request a username. We can use `useFormStatus` to display a temporary status message confirming what username they have requested. +Aqui, temos um formulário onde os usuários podem solicitar um nome de usuário. Podemos usar o `useFormStatus` para exibir uma mensagem de status temporária confirmando qual nome de usuário eles solicitaram. @@ -184,13 +184,13 @@ export default function UsernameForm() { return (
-

Request a Username:

+

Solicitar um Nome de Usuário:


-

{data ? `Requesting ${data?.get("username")}...`: ''}

+

{data ? `Solicitando ${data?.get("username")}...`: ''}

); } @@ -249,12 +249,12 @@ button { --- -## Troubleshooting {/*troubleshooting*/} +## Solução de Problemas {/*troubleshooting*/} -### `status.pending` is never `true` {/*pending-is-never-true*/} +### `status.pending` nunca é `true` {/*pending-is-never-true*/} -`useFormStatus` will only return status information for a parent ``. +O `useFormStatus` apenas retornará informações de status para um `` pai. -If the component that calls `useFormStatus` is not nested in a ``, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `` element. +Se o componente que chama o `useFormStatus` não estiver aninhado em um ``, `status.pending` sempre retornará `false`. Verifique se o `useFormStatus` é chamado em um componente que é filho de um elemento ``. -`useFormStatus` will not track the status of a `` rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details. +O `useFormStatus` não rastreará o status de um `` renderizado no mesmo componente. Veja [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) para mais detalhes. \ No newline at end of file