Skip to content

Commit 1de59e7

Browse files
authored
feat(i18n): translate useActionState reference page to Spanish (#1042)
1 parent 6e4828d commit 1de59e7

File tree

1 file changed

+36
-36
lines changed

1 file changed

+36
-36
lines changed

src/content/reference/react/useActionState.md

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: useActionState
44

55
<Intro>
66

7-
`useActionState` is a Hook that allows you to update state based on the result of a form action.
7+
`useActionState` es un Hook de React que te permite actualizar el estado basándote en el resultado de una acción de formulario.
88

99
```js
1010
const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);
@@ -14,7 +14,7 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin
1414
1515
<Note>
1616
17-
In earlier React Canary versions, this API was part of React DOM and called `useFormState`.
17+
En versiones anteriores de React Canary, esta API era parte de React DOM y se llamaba `useFormState`.
1818
1919
</Note>
2020
@@ -23,13 +23,13 @@ In earlier React Canary versions, this API was part of React DOM and called `use
2323
2424
---
2525
26-
## Reference {/*reference*/}
26+
## Referencia {/*reference*/}
2727
2828
### `useActionState(action, initialState, permalink?)` {/*useactionstate*/}
2929
3030
{/* TODO T164397693: link to actions documentation once it exists */}
3131
32-
Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state and whether the Action is still pending. The latest form state is also passed to the function that you provided.
32+
Llama a `useActionState` en el nivel superior de tu componente para crear un estado del componente que se actualiza [cuando se invoca una acción de formulario](/reference/react-dom/components/form). Le pasas a `useActionState` una función de acción de formulario existente junto con un estado inicial, y te devuelve una nueva acción que puedes usar en tu formulario, junto con el estado más reciente del formulario y si la acción aún está pendiente. El estado más reciente del formulario también se pasa a la función que proporcionaste.
3333
3434
```js
3535
import { useActionState } from "react";
@@ -49,40 +49,40 @@ function StatefulForm({}) {
4949
}
5050
```
5151
52-
The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
52+
El estado del formulario es el valor que devuelve la acción la última vez que se envió el formulario. Si el formulario aún no se ha enviado, es el estado inicial que proporcionaste.
5353
54-
If used with a Server Function, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
54+
Si se usa con una Función de Servidor, `useActionState` permite mostrar la respuesta del servidor al enviar el formulario incluso antes de que la hidratación haya completado.
5555
56-
[See more examples below.](#usage)
56+
[Ver más ejemplos abajo.](#usage)
5757
58-
#### Parameters {/*parameters*/}
58+
#### Parámetros {/*parameters*/}
5959
60-
* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
61-
* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
62-
* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: feeds) in conjunction with progressive enhancement: if `fn` is a [server function](/reference/rsc/server-functions) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect.
60+
* `fn`: La función que se llamará cuando se envíe el formulario o se presione el botón. Cuando se llama a la función, recibirá el estado previo del formulario (inicialmente el `initialState` que pasaste, y posteriormente su valor de retorno anterior) como primer argumento, seguido de los argumentos que una acción de formulario normalmente recibe.
61+
* `initialState`: El valor que deseas que tenga el estado inicialmente. Puede ser cualquier valor serializable. Este argumento se ignora después de que la acción se invoque por primera vez.
62+
* **opcional** `permalink`: Un string que contiene la URL única de la página que este formulario modifica. Para usar en páginas con contenido dinámico (por ejemplo: feeds) en conjunto con mejora progresiva: si `fn` es una [función de servidor](/reference/rsc/server-functions) y el formulario se envía antes de que el paquete de JavaScript se cargue, el navegador navegará a la URL de permalink especificada, en lugar de la URL de la página actual. Asegúrate de que el mismo componente de formulario se renderice en la página de destino (incluyendo la misma acción `fn` y `permalink`) para que React sepa cómo pasar el estado. Una vez que el formulario se haya hidratado, este parámetro no tiene efecto.
6363
6464
{/* TODO T164397693: link to serializable values docs once it exists */}
6565
66-
#### Returns {/*returns*/}
66+
#### Devuelve {/*returns*/}
6767
68-
`useActionState` returns an array with the following values:
68+
`useActionState` devuelve un _array_ con los siguientes valores:
6969
70-
1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
71-
2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form. The action can also be called manually within [`startTransition`](/reference/react/startTransition).
72-
3. The `isPending` flag that tells you whether there is a pending Transition.
70+
1. El estado actual. Durante el primer renderizado, coincidirá con el `initialState` que hayas pasado. Después de que la acción se invoque, coincidirá con el valor que devolvió la acción.
71+
2. Una nueva acción que puedes pasar como la prop `action` a tu componente `form` o como la prop `formAction` a cualquier componente `button` dentro del formulario. La acción también puede llamarse manualmente dentro de [`startTransition`](/reference/react/startTransition).
72+
3. El flag `isPending` que te indica si hay una Transición pendiente.
7373
74-
#### Caveats {/*caveats*/}
74+
#### Advertencias {/*caveats*/}
7575
76-
* When used with a framework that supports React Server Components, `useActionState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.
77-
* The function passed to `useActionState` receives an extra argument, the previous or initial state, as its first argument. This makes its signature different than if it were used directly as a form action without using `useActionState`.
76+
* Cuando se usa con un framework que soporta React Server Components, `useActionState` permite hacer los formularios interactivos antes de que JavaScript se haya ejecutado en el cliente. Cuando se usa sin Server Components, es equivalente al estado local del componente.
77+
* La función pasada a `useActionState` recibe un argumento extra, el estado previo o inicial, como su primer argumento. Esto hace que su firma sea diferente a si se usara directamente como una acción de formulario sin usar `useActionState`.
7878
7979
---
8080
81-
## Usage {/*usage*/}
81+
## Uso {/*usage*/}
8282
83-
### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}
83+
### Usar información devuelta por una acción de formulario {/*using-information-returned-by-a-form-action*/}
8484
85-
Call `useActionState` at the top level of your component to access the return value of an action from the last time a form was submitted.
85+
Llama a `useActionState` en el nivel superior de tu componente para acceder al valor de retorno de una acción desde la última vez que se envió el formulario.
8686
8787
```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
8888
import { useActionState } from 'react';
@@ -99,15 +99,15 @@ function MyComponent() {
9999
}
100100
```
101101
102-
`useActionState` returns an array with the following items:
102+
`useActionState` devuelve un _array_ con los siguientes elementos:
103103
104-
1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
105-
2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop or call manually within `startTransition`.
106-
3. A <CodeStep step={1}>pending state</CodeStep> that you can utilise while your action is processing.
104+
1. El <CodeStep step={1}>estado actual</CodeStep> del formulario, que inicialmente se establece con el <CodeStep step={4}>estado inicial</CodeStep> que proporcionaste, y después de enviar el formulario se establece con el valor de retorno de la <CodeStep step={3}>acción</CodeStep> que proporcionaste.
105+
2. Una <CodeStep step={2}>nueva acción</CodeStep> que pasas a `<form>` como su prop `action` o la llamas manualmente dentro de `startTransition`.
106+
3. Un <CodeStep step={1}>estado pendiente</CodeStep> que puedes utilizar mientras tu acción se está procesando.
107107
108-
When the form is submitted, the <CodeStep step={3}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
108+
Cuando se envía el formulario, se llamará a la función de <CodeStep step={3}>acción</CodeStep> que proporcionaste. Su valor de retorno se convertirá en el nuevo <CodeStep step={1}>estado actual</CodeStep> del formulario.
109109
110-
The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useActionState` had not been used.
110+
La <CodeStep step={3}>acción</CodeStep> que proporcionaste también recibirá un nuevo primer argumento, el <CodeStep step={1}>estado actual</CodeStep> del formulario. La primera vez que se envía el formulario, este será el <CodeStep step={4}>estado inicial</CodeStep> que proporcionaste, mientras que en envíos posteriores, será el valor de retorno de la última vez que se llamó a la acción. El resto de los argumentos son los mismos que si no se hubiera usado `useActionState`.
111111
112112
```js [[3, 1, "action"], [1, 1, "currentState"]]
113113
function action(currentState, formData) {
@@ -116,11 +116,11 @@ function action(currentState, formData) {
116116
}
117117
```
118118
119-
<Recipes titleText="Display information after submitting a form" titleId="display-information-after-submitting-a-form">
119+
<Recipes titleText="Mostrar información después de enviar un formulario" titleId="display-information-after-submitting-a-form">
120120
121-
#### Display form errors {/*display-form-errors*/}
121+
#### Mostrar errores de formulario {/*display-form-errors*/}
122122
123-
To display messages such as an error message or toast that's returned by a Server Function, wrap the action in a call to `useActionState`.
123+
Para mostrar mensajes como un mensaje de error o un toast devuelto por una Función de Servidor, envuelve la acción en una llamada a `useActionState`.
124124
125125
<Sandpack>
126126
@@ -182,9 +182,9 @@ form button {
182182
183183
<Solution />
184184
185-
#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
185+
#### Mostrar información estructurada después de enviar un formulario {/*display-structured-information-after-submitting-a-form*/}
186186
187-
The return value from a Server Function can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
187+
El valor de retorno de una Función de Servidor puede ser cualquier valor serializable. Por ejemplo, podría ser un objeto que incluya un booleano indicando si la acción fue exitosa, un mensaje de error, o información actualizada.
188188
189189
<Sandpack>
190190
@@ -259,11 +259,11 @@ form button {
259259
260260
</Recipes>
261261
262-
## Troubleshooting {/*troubleshooting*/}
262+
## Solución de problemas {/*troubleshooting*/}
263263
264-
### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/}
264+
### Mi acción ya no puede leer los datos del formulario enviado {/*my-action-can-no-longer-read-the-submitted-form-data*/}
265265
266-
When you wrap an action with `useActionState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form.
266+
Cuando envuelves una acción con `useActionState`, recibe un argumento extra *como su primer argumento*. Los datos del formulario enviado son por lo tanto su *segundo* argumento en lugar de ser el primero como sería normalmente. El nuevo primer argumento que se agrega es el estado actual del formulario.
267267
268268
```js
269269
function action(currentState, formData) {

0 commit comments

Comments
 (0)