You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/hooks/useFormStatus.md
+42-42Lines changed: 42 additions & 42 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,13 +5,13 @@ canary: true
5
5
6
6
<Canary>
7
7
8
-
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).
8
+
El Hook `useFormStatus`está actualmente disponible solo en React Canary y canales experimentales. Aprende más sobre los [canales de lanzamiento de React aquí](/community/versioning-policy#all-release-channels).
9
9
10
10
</Canary>
11
11
12
12
<Intro>
13
13
14
-
`useFormStatus`is a Hook that gives you status information of the last form submission.
14
+
`useFormStatus`es un Hook que brinda información de estado del último formulario enviado.
@@ -47,42 +47,42 @@ export default function App() {
47
47
}
48
48
```
49
49
50
-
To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStepstep={1}>`pending`</CodeStep> property which tells you if the form is actively submitting.
50
+
Para obtener información de estado, el componente de `Enviar` tiene que ser renderizado dentro de un `<form>`. El Hook retorna información como la propiedad <CodeStepstep={1}>`pending`</CodeStep> que te dice si el formulario se está enviando activamente.
51
51
52
-
In the above example, `Submit` uses this information to disable `<button>`presses while the form is submitting.
52
+
En el ejemplo de arriba, `Enviar` usa esta información para deshabilitar la pulsación de `<button>`mientras el formulario se está enviando.
53
53
54
-
[See more examples below.](#usage)
54
+
[Ver más ejemplos abajo.](#usage)
55
55
56
-
#### Parameters {/*parameters*/}
56
+
#### Parámetros {/*parameters*/}
57
57
58
-
`useFormStatus`does not take any parameters.
58
+
`useFormStatus`no toma ningún parámetro.
59
59
60
-
#### Returns {/*returns*/}
60
+
#### Retorna {/*returns*/}
61
61
62
-
A `status`object with the following properties:
62
+
Un objeto de `status`con las siguientes propiedades:
63
63
64
-
*`pending`: A boolean. If `true`, this means the parent `<form>`is pending submission. Otherwise,`false`.
64
+
*`pending`: Un booleano. Si es `true` significa que el `<form>`padre está pendiente de enviarse. De otro modo es`false`.
65
65
66
-
*`data`: An object implementing the[`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)that contains the data the parent`<form>`is submitting. If there is no active submission or no parent`<form>`, it will be`null`.
66
+
*`data`:Un objeto que implementa la[`interfaz FormData`](https://developer.mozilla.org/es/docs/Web/API/FormData)que contiene los datos que el`<form>`padre está enviando. Si no hay ningún envío activo o no hay`<form>`, va a ser`null`.
67
67
68
-
*`method`: A string value of either `'get'`or`'post'`. This represents whether the parent `<form>`is submitting with either a `GET` or `POST`[HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). By default, a`<form>`will use the `GET`method and can be specified by the [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) property.
68
+
*`method`: El valor de un string ya sea `'get'`o`'post'`. Este representa si el `<form>`se está enviando con el [método HTTP](https://developer.mozilla.org/es/docs/Web/HTTP/Methods)`GET` o `POST`. Por defecto, un`<form>`va a usar el método `GET`y puede estar especificado con la propiedad de [`method`](https://developer.mozilla.org/es/docs/Web/HTML/Element/form#method).
69
69
70
70
[//]: #(Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
71
-
*`action`: A reference to the function passed to the `action` prop on the parent `<form>`. If there is no parent `<form>`, the property is`null`. If there is a URI value provided to the `action` prop, or no `action`prop specified, `status.action`will be `null`.
71
+
*`action`: Una referencia a la función que es pasada al prop de `action` en el `<form>` padre. Si no hay un `<form>` padre, la propiedad es`null`. Si se ha proporcionado un valor URI al prop de `action`, o no se ha especificado un prop de `action`, `status.action`va a ser `null`.
72
72
73
-
#### Caveats {/*caveats*/}
73
+
#### Advertencias {/*caveats*/}
74
74
75
-
*The `useFormStatus`Hook must be called from a component that is rendered inside a`<form>`.
76
-
*`useFormStatus`will only return status information for a parent `<form>`. It will not return status information for any `<form>`rendered in that same component or children components.
75
+
*El Hook `useFormStatus`debe llamarse desde un componente que se renderiza dentro de un`<form>`.
76
+
*`useFormStatus`solo retornará información de estado para un `<form>` padre. No retornará información de estado a ningún `<form>`renderizado en ese mismo componente o componente hijos.
77
77
78
78
---
79
79
80
-
## Usage {/*usage*/}
80
+
## Uso {/*usage*/}
81
81
82
-
### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
83
-
To display a pending state while a form is submitting, you can call the`useFormStatus`Hook in a component rendered in a `<form>`and read the `pending`property returned.
82
+
### Muestra un estado pendiente durante el envío de un formulario {/*display-a-pending-state-during-form-submission*/}
83
+
Para mostrar un estado pendiente mientras un formulario se está enviando, puedes llamar al Hook`useFormStatus`en un componente renderizado en un `<form>`y leer la propiedad `pending`que retorna.
84
84
85
-
Here, we use the`pending`property to indicate the form is submitting.
85
+
Aquí, usamos la propiedad`pending`para indicar que el formulario se está enviando.
86
86
87
87
<Sandpack>
88
88
@@ -94,7 +94,7 @@ function Submit() {
94
94
const { pending } =useFormStatus();
95
95
return (
96
96
<button type="submit" disabled={pending}>
97
-
{pending ?"Submitting...":"Submit"}
97
+
{pending ?"Enviando...":"Enviar"}
98
98
</button>
99
99
);
100
100
}
@@ -133,30 +133,30 @@ export async function submitForm(query) {
133
133
134
134
<Pitfall>
135
135
136
-
##### `useFormStatus`will not return status information for a `<form>`rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
136
+
##### `useFormStatus`no retorna información de estado a un `<form>`renderizado en el mismo componente. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
137
137
138
-
The `useFormStatus`Hook only returns status information for a parent`<form>`and not for any `<form>`rendered in the same component calling the Hook, or child components.
138
+
El Hook `useFormStatus`solo retorna información de estado a un`<form>`padre y no para ningún `<form>`renderizado en el mismo componente que llama el Hook, o componentes hijos.
139
139
140
140
```js
141
141
functionForm() {
142
-
// 🚩 `pending` will never be true
143
-
// useFormStatus does not track the form rendered in this component
142
+
// 🚩 `pending` nunca será true
143
+
// useFormStatus no rastrea el formulario renderizado en este componente
144
144
const { pending } =useFormStatus();
145
145
return<form action={submit}></form>;
146
146
}
147
147
```
148
148
149
-
Instead call `useFormStatus`from inside a component that is located inside`<form>`.
149
+
En su lugar llama a `useFormStatus`desde dentro de un componente que se encuentra dentro de un`<form>`.
150
150
151
151
```js
152
152
functionSubmit() {
153
-
// ✅ `pending` will be derived from the form that wraps the Submit component
153
+
// ✅ `pending` se derivará del formulario que envuelve el componente Enviar
154
154
const { pending } =useFormStatus();
155
155
return<button disabled={pending}>...</button>;
156
156
}
157
157
158
158
functionForm() {
159
-
//This is the <form> `useFormStatus` tracks
159
+
//Este es el <form> que `useFormStatus` rastrea
160
160
return (
161
161
<form action={submit}>
162
162
<Submit />
@@ -167,11 +167,11 @@ function Form() {
167
167
168
168
</Pitfall>
169
169
170
-
### Read the form data being submitted {/*read-form-data-being-submitted*/}
170
+
### Lee los datos del formulario que se envían {/*read-form-data-being-submitted*/}
171
171
172
-
You can use the`data`property of the status information returned from `useFormStatus`to display what data is being submitted by the user.
172
+
Puedes usar la propiedad`data`de la información de estado que retorna del `useFormStatus`para mostrar qué datos está siendo enviando por el usuario.
173
173
174
-
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.
174
+
Aquí, tenemos un formulario donde los usuarios pueden solicitar un nombre de usuario. Podemos usar `useFormStatus`para mostrar temporalmente un mensaje de estado que confirme qué nombre de usuario han solicitado.
175
175
176
176
<Sandpack>
177
177
@@ -184,13 +184,13 @@ export default function UsernameForm() {
`useFormStatus`will only return status information for a parent`<form>`.
256
+
`useFormStatus`solo retornará información de estado a un`<form>` padre.
257
257
258
-
If the component that calls `useFormStatus`is not nested in a`<form>`, `status.pending`will always return`false`. Verify`useFormStatus`is called in a component that is a child of a `<form>` element.
258
+
Si el componente que llama a `useFormStatus`no está anidado en un`<form>`, `status.pending`siempre retornará `false`. Verifica que `useFormStatus`está siendo llamado en un componente que es hijo de un elemento `<form>`.
259
259
260
-
`useFormStatus`will not track the status of a `<form>`rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.
260
+
`useFormStatus`no rastreará al estado de un `<form>`renderizado en el mismo componente. Mira [Atención](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) para más detalles.
*`message`: The message you want to display if the object gets passed to a Client Component. This message will be displayed as a part of the Error that will be thrown if the object gets passed to a Client Component.
57
+
*`message`: El mensaje que deseas mostrar si el objeto se pasa a un Componente Cliente. Este mensaje se mostrará como parte del Error que se lanzará si el objeto se pasa a un Componente Cliente.
58
58
59
-
*`object`: The object to be tainted. Functions and class instances can be passed to `taintObjectReference`as`object`. Functions and classes are already blocked from being passed to Client Components but the React's default error message will be replaced by what you defined in `message`. When a specific instance of a Typed Array is passed to`taintObjectReference`as`object`, any other copies of the Typed Array will not be tainted.
59
+
*`object`: El objeto a contaminar. Funciones e instancias de clases pueden ser pasadas a `taintObjectReference`como`object`. Las funciones y clases ya están bloqueadas para ser pasadas a Componentes Cliente, pero el mensaje de error predeterminado de React será reemplazado por lo que hayas definido en el `message`. Cuando una instancia específica de una matriz tipada se pasa a`taintObjectReference`como`object`, cualquier otra copia de la matriz tipada no será contaminada.
-Recreating or cloning a tainted object creates a new untainted object which may contain sensitive data. For example, if you have a tainted `user`object, `const userInfo = {name: user.name, ssn: user.ssn}`or`{...user}`will create new objects which are not tainted. `taintObjectReference`only protects against simple mistakes when the object is passed through to a Client Component unchanged.
67
+
-Recrear o clonar un objeto contaminado crea un nuevo objeto no contaminado que puede contener datos sensibles. Por ejemplo, si tienes un objeto `user`contaminado, `const userInfo = {name: user.name, ssn: user.ssn}`o`{...user}`creará nuevos objetos que no estarán contamidos. `taintObjectReference`solo protege contra errores simples cuando el objeto se pasa sin cambios a un Componente Cliente.
68
68
69
69
<Pitfall>
70
70
71
-
**Do not rely on just tainting for security.**Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untainted object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
71
+
**No confíes únicamente en la 'contaminación' para la seguridad.**Contaminar un objeto no evita la filtración de todos los valores derivados posibles. Por ejemplo, el clon de un objeto contaminado creará un nuevo objeto no contaminado. Usar datos de un objeto contaminado (e.j. `{secret: taintedObj.secret}`) creará un nuevo valor u objeto que no esté contaminado. La contaminación es una capa de protección; una aplicación segura tendrá múltiples capas de protección, APIs bien diseñadas y patrones de aislamiento.
72
72
73
73
</Pitfall>
74
74
75
75
---
76
76
77
-
## Usage {/*usage*/}
77
+
## Uso {/*usage*/}
78
78
79
-
### Prevent user data from unintentionally reaching the client {/*prevent-user-data-from-unintentionally-reaching-the-client*/}
79
+
### Evita que los datos de usuario lleguen al cliente de manera no intencionada {/*prevent-user-data-from-unintentionally-reaching-the-client*/}
80
80
81
-
A Client Component should never accept objects that carry sensitive data. Ideally, the data fetching functions should not expose data that the current user should not have access to. Sometimes mistakes happen during refactoring. To protect against these mistakes happening down the line we can "taint" the user object in our data API.
81
+
Un Componente Cliente nunca debería aceptar objetos que contengan datos sensibles. Idealmente, las funciones de obtención de datos no deberían exponer datos a los que el usuario actual no debería tener acceso. A veces, ocurren errores durante la refactorización. Para protegernos contra estos errores en el futuro, podemos 'contaminar' el objeto de usuario en nuestra API de datos.
@@ -94,13 +94,13 @@ export async function getUser(id) {
94
94
}
95
95
```
96
96
97
-
Now whenever anyone tries to pass this object to a Client Component, an error will be thrown with the passed in error message instead.
97
+
Ahora, cada vez que alguien intente pasar este objeto a un Componente Cliente, se lanzará un error con el mensaje de error proporcionado.
98
98
99
99
<DeepDive>
100
100
101
-
#### Protecting against leaks in data fetching {/*protecting-against-leaks-in-data-fetching*/}
101
+
#### Protegiendo contra fugas en la obtención de datos. {/*protecting-against-leaks-in-data-fetching*/}
102
102
103
-
If you're running a Server Components environment that has access to sensitive data, you have to be careful not to pass objects straight through:
103
+
Si estás ejecutando un entorno de Componentes de Servidor que tiene acceso a datos sensibles, debes tener cuidado de no pasar objetos directamente:
104
104
105
105
```js
106
106
// api.js
@@ -130,7 +130,7 @@ export async function InfoCard({ user }) {
130
130
}
131
131
```
132
132
133
-
Ideally, the `getUser`should not expose data that the current user should not have access to. To prevent passing the `user` object to a Client Component down the line we can "taint" the user object:
133
+
Idealmente, la función `getUser`no debería exponer datos a los que el `user` actual no debería tener acceso. Para evitar pasar el objeto de usuario a un Componente Cliente más adelante, podemos "contaminar" el objeto de usuario:
134
134
135
135
136
136
```js
@@ -148,6 +148,6 @@ export async function getUser(id) {
148
148
}
149
149
```
150
150
151
-
Now if anyone tries to pass the `user`object to a Client Component, an error will be thrown with the passed in error message.
151
+
Ahora, si alguien intenta pasar el objeto de `user`a un Componente Cliente, se lanzará un error con el mensaje de error proporcionado.
0 commit comments