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
You are probably here because you got the following error message:
7
+
Probablemente llegaste aquí porque obtuviste el siguiente mensaje de error:
8
8
9
9
> Hooks can only be called inside the body of a function component.
10
10
11
-
There are three common reasons you might be seeing it:
11
+
Hay tres razones comunes por las cuales podrías estar viéndolo:
12
12
13
-
1.You might have **mismatching versions**of React and React DOM.
14
-
2.You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**.
15
-
3.You might have **more than one copy of React**in the same app.
13
+
1.Tienes **versiones incongruentes**de React y React DOM.
14
+
2.Estás **rompiendo las [Reglas de los Hooks](/docs/hooks-rules.html)**.
15
+
3.Tienes **más de una copia de React**en la misma aplicación.
16
16
17
-
Let's look at each of these cases.
17
+
Demos un vistazo a cada uno de estos casos.
18
18
19
-
## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
19
+
## Versiones incongruentes de React y React DOM {#mismatching-versions-of-react-and-react-dom}
20
20
21
-
You might be using a version of`react-dom` (< 16.8.0) or`react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom`or`npm ls react-native`in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
21
+
Puede que estés usando una versión de`react-dom` (< 16.8.0) o`react-native` (< 0.59) que no es compatible con los Hooks. Puedes correr `npm ls react-dom`o`npm ls react-native`en el directorio de tu aplicación para verificar qué versión estás usando. Si encuentras más de una de ellas, esto también puede causar problemas (más abajo, más información sobre esto).
22
22
23
-
## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
23
+
## Rompiendo las reglas de los Hooks {#rompiendo-las-reglas-de-los-hooks}
24
24
25
-
You can only call Hooks **while React is rendering a function component**:
25
+
Solamente puedes llamar Hooks **mientras React está renderizando un componente funcional**:
26
26
27
-
* ✅ Call them at the top level in the body of a function component.
28
-
* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html).
27
+
* ✅ Llámalos en el nivel superior en el cuerpo de un componente funcional.
28
+
* ✅ Llámalos en el nivel superior en el cuerpo de un [Hook personalizado](/docs/hooks-custom.html).
29
29
30
-
**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
30
+
**Lee más acerca de esto en las [Reglas de los Hooks](/docs/hooks-rules.html).**
31
31
32
32
```js{2-3,8-9}
33
33
function Counter() {
34
-
// ✅ Good: top-level in a function component
34
+
// ✅ Bien: nivel superior en un componente funcional
35
35
const [count, setCount] = useState(0);
36
36
// ...
37
37
}
38
38
39
39
function useWindowWidth() {
40
-
// ✅ Good: top-level in a custom Hook
40
+
// ✅ Bien: Nivel superior en un Hook personalizado
To avoid confusion, it’s **not**supported to call Hooks in other cases:
46
+
Para evitar confusiones, **no**se admite llamar Hooks en otros casos:
47
47
48
-
* 🔴 Do not call Hooks in class components.
49
-
* 🔴 Do not call in event handlers.
50
-
* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or`useEffect`.
48
+
* 🔴 No llames Hooks en componentes de clase.
49
+
* 🔴 No los llames en manejadores de eventos.
50
+
* 🔴 No llames Hooks dentro de funciones pasadas a `useMemo`, `useReducer`, o`useEffect`.
51
51
52
-
If you break these rules, you might see this error.
52
+
Si rompes estas reglas, podrías ver el error.
53
53
54
54
```js{3-4,11-12,20-21}
55
55
function Bad1() {
56
56
function handleClick() {
57
-
// 🔴 Bad: inside an event handler (to fix, move it outside!)
57
+
// 🔴 Mal: Dentro de un manejador de eventos (para arreglarlo, muévelo afuera!)
58
58
const theme = useContext(ThemeContext);
59
59
}
60
60
// ...
61
61
}
62
62
63
63
function Bad2() {
64
64
const style = useMemo(() => {
65
-
// 🔴 Bad: inside useMemo (to fix, move it outside!)
65
+
// 🔴 Mal: Dentro de useMemo (para arreglarlo, muévelo afuera!)
66
66
const theme = useContext(ThemeContext);
67
67
return createStyle(theme);
68
68
});
@@ -71,52 +71,52 @@ function Bad2() {
71
71
72
72
class Bad3 extends React.Component {
73
73
render() {
74
-
// 🔴 Bad: inside a class component
74
+
// 🔴 Mal: En un componente de clase
75
75
useEffect(() => {})
76
76
// ...
77
77
}
78
78
}
79
79
```
80
80
81
-
You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to catch some of these mistakes.
81
+
Puedes usar el [plugin `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)para identificar algunos de estos errores.
82
82
83
-
>Note
83
+
>Nota
84
84
>
85
-
>[Custom Hooks](/docs/hooks-custom.html)*may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
85
+
>[Los Hooks personalizados](/docs/hooks-custom.html)*podrían* llamar otros Hooks (ese es su propósito). Esto funciona porque los Hooks personalizados también se supone que deben llamarse únicamente mientras un componente funcional se está renderizando.
86
86
87
87
88
-
## Duplicate React {#duplicate-react}
88
+
## React duplicado {#duplicate-react}
89
89
90
-
In order for Hooks to work, the `react`import from your application code needs to resolve to the same module as the `react`import from inside the `react-dom` package.
90
+
Para que los Hook funcionen, el import de `react`de tu código debe resolver al mismo módulo que el import de `react`dentro del paquete `react-dom`.
91
91
92
-
If these `react`imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies**of the`react` package.
92
+
Si estos imports de `react`resuelven a dos objetos exports diferentes, verás esta advertencia. Esto podría suceder si **accidentalmente resultas con dos copias**del paquete`react`.
93
93
94
-
If you use Node for package management, you can run this check in your project folder:
94
+
Si usas Node para gestión de paquetes, puedes correr este comando en el directorio de tu proyecto:
95
95
96
96
npm ls react
97
97
98
-
If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react`as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)is one possible workaround.
98
+
Si ves más de un React, tendrás que descubrir por qué está sucediendo esto y arreglar tu árbol de dependencias. Por ejemplo, quizá una biblioteca que estás usando especifica incorrectamente `react`como una dependencia (en lugar de una peer dependency). Hasta que esa biblioteca sea arreglada, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)es una posible solución temporal.
99
99
100
-
You can also try to debug this problem by adding some logs and restarting your development server:
100
+
También puedes intentar depurar este problema agregando algunos logs y reiniciando el servidor de desarrollo:
101
101
102
102
```js
103
-
//Add this in node_modules/react-dom/index.js
103
+
//Agrega esto en node_modules/react-dom/index.js
104
104
window.React1=require('react');
105
105
106
-
//Add this in your component file
106
+
//Agrega esto en tu componente
107
107
require('react-dom');
108
108
window.React2=require('react');
109
109
console.log(window.React1===window.React2);
110
110
```
111
111
112
-
If it prints `false`then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991)includes some common reasons encountered by the community.
112
+
Si imprime `false`entonces probablemente tienes dos React y debes averiguar por qué. [Este issue](https://github.com/facebook/react/issues/13991)incluye varias razones comunes encontradas por la comunidad.
113
113
114
-
This problem can also come up when you use `npm link`or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp`and`mylib`are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react`from`mylib`. This should make the library use the application's React copy.
114
+
Este problema también ocurre cuando usas `npm link`o un equivalente. En ese caso, tu bundler podría "ver" dos Reacts — uno en la carpeta de aplicación y otro en la de bibliotecas. Asumiendo que `myapp`y`mylib`son carpetas hermanas, una solución posible es correr `npm link ../myapp/node_modules/react`en`mylib`. Esto debería hacer que la biblioteca use la copia de React de la aplicación.
115
115
116
-
>Note
116
+
>Nota
117
117
>
118
-
>In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')`resolves differently between the component and the `react-dom`copy it was rendered with.
118
+
>En general, React admite usar múltiples copias independientes en una página (por ejemplo, si una página y un widget externo lo usan). Sólo falla si `require('react')`resuelve diferente entre un componente y la copia de `react-dom`con la que fue renderizado.
119
119
120
-
## Other Causes {#other-causes}
120
+
## Otras causas {#other-causes}
121
121
122
-
If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991)and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.
122
+
Si nada de esto funciona, por favor agrega un comentario en [este *issue*](https://github.com/facebook/react/issues/13991)y trataremos de ayudar. Intenta crear un pequeño ejemplo que reproduzca el problema — podrías encontrar la causa mientras lo haces.
0 commit comments