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
Il warning invalid-aria-prop appare quando provi a renderizzare un elemento del DOM con una aria-* prop che non esiste nella [specifica](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties) Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA).
6
+
<Note>
7
+
8
+
Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/warnings/invalid-aria-prop.md).
9
+
10
+
</Note>
11
+
12
+
Il warning invalid-aria-prop appare quando provi a renderizzare un elemento del DOM con una prop `aria-*` che non esiste nella [specifica](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties) Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA).
6
13
7
14
1. Se pensi che la prop che stai usando sia valida, controlla attentamente eventuali errori di battitura. `aria-labelledby` e `aria-activedescendant` sono spesso scritte in modo scorretto.
8
15
9
16
2. Se hai scritto `aria-role`, probabilmente intendevi `role`.
10
17
11
-
3. Altrimenti, se stai utilizzando l'ultima versione di React DOM e verificato che stai usando un nome di proprietà valido presente nella lista della specifica ARIA, cortesemente [riporta un bug](https://github.com/react/react/issues/new/choose).
18
+
3. Altrimenti, se stai utilizzando l'ultima versione di React DOM e hai verificato che stai usando un nome di proprietà valido presente nella lista della specifica ARIA, cortesemente [riporta un bug](https://github.com/react/react/issues/new/choose).
You are probably here because you got the following error message:
6
+
<Note>
7
+
8
+
Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/warnings/invalid-hook-call-warning.md).
9
+
10
+
</Note>
11
+
12
+
Probabilmente sei qui perché hai ricevuto il seguente messaggio di errore:
6
13
7
14
<ConsoleBlocklevel="error">
8
15
9
16
Hooks can only be called inside the body of a function component.
10
17
11
18
</ConsoleBlock>
12
19
13
-
There are three common reasons you might be seeing it:
20
+
Ci sono tre motivi comuni per cui potresti vederlo:
14
21
15
-
1.You might be **breaking the Rules of Hooks**.
16
-
2.You might have **mismatching versions**of React and React DOM.
17
-
3.You might have **more than one copy of React**in the same app.
22
+
1.Potresti **violare le Regole degli Hooks**.
23
+
2.Potresti avere **versioni non corrispondenti**di React e React DOM.
24
+
3.Potresti avere **più di una copia di React**nella stessa app.
18
25
19
-
Let's look at each of these cases.
26
+
Vediamo ciascuno di questi casi.
20
27
21
-
## Breaking Rules of Hooks {/*breaking-rules-of-hooks*/}
28
+
## Violare le Regole degli Hooks {/*breaking-rules-of-hooks*/}
22
29
23
-
Functions whose names start with `use`are called[*Hooks*](/reference/react) in React.
30
+
Le funzioni il cui nome inizia con `use`sono chiamate[*Hooks*](/reference/react) in React.
24
31
25
-
**Don’t call Hooks inside loops, conditions, or nested functions.**Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
32
+
**Non chiamare gli Hooks dentro loop, condizioni o funzioni annidate.**Usa invece sempre gli Hooks al top level della tua funzione React, prima di qualsiasi return anticipato. Puoi chiamare gli Hooks solo mentre React sta renderizzando un componente funzione:
26
33
27
-
* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
28
-
* ✅ Call them at the top level in the body of a[custom Hook](/learn/reusing-logic-with-custom-hooks).
34
+
* ✅ Chiamali al top level nel corpo di un [componente funzione](/learn/your-first-component).
35
+
* ✅ Chiamali al top level nel corpo di un[custom Hook](/learn/reusing-logic-with-custom-hooks).
It’s **not**supported to call Hooks (functions starting with `use`) in any other cases, for example:
51
+
**Non**è supportato chiamare gli Hooks (funzioni che iniziano con `use`) in nessun altro caso, ad esempio:
45
52
46
-
* 🔴 Do not call Hooks inside conditions or loops.
47
-
* 🔴 Do not call Hooks after a conditional `return`statement.
48
-
* 🔴 Do not call Hooks in event handlers.
49
-
* 🔴 Do not call Hooks in class components.
50
-
* 🔴 Do not call Hooks inside functions passed to`useMemo`, `useReducer`, or`useEffect`.
53
+
* 🔴 Non chiamare gli Hooks dentro condizioni o loop.
54
+
* 🔴 Non chiamare gli Hooks dopo un'istruzione `return`condizionale.
55
+
* 🔴 Non chiamare gli Hooks nei gestori di eventi.
56
+
* 🔴 Non chiamare gli Hooks nei componenti classe.
57
+
* 🔴 Non chiamare gli Hooks dentro funzioni passate a`useMemo`, `useReducer` o`useEffect`.
51
58
52
-
If you break these rules, you might see this error.
59
+
Se violi queste regole, potresti vedere questo errore.
53
60
54
61
```js{3-4,11-12,20-21}
55
62
function Bad({ cond }) {
56
63
if (cond) {
57
-
// 🔴 Bad: inside a condition (to fix, move it outside!)
64
+
// 🔴 Sbagliato: dentro una condizione (per correggere, spostalo fuori!)
58
65
const theme = useContext(ThemeContext);
59
66
}
60
67
// ...
61
68
}
62
69
63
70
function Bad() {
64
71
for (let i = 0; i < 10; i++) {
65
-
// 🔴 Bad: inside a loop (to fix, move it outside!)
72
+
// 🔴 Sbagliato: dentro un loop (per correggere, spostalo fuori!)
66
73
const theme = useContext(ThemeContext);
67
74
}
68
75
// ...
@@ -72,22 +79,22 @@ function Bad({ cond }) {
72
79
if (cond) {
73
80
return;
74
81
}
75
-
// 🔴 Bad: after a conditional return (to fix, move it before the return!)
82
+
// 🔴 Sbagliato: dopo un return condizionale (per correggere, spostalo prima del return!)
76
83
const theme = useContext(ThemeContext);
77
84
// ...
78
85
}
79
86
80
87
function Bad() {
81
88
function handleClick() {
82
-
// 🔴 Bad: inside an event handler (to fix, move it outside!)
89
+
// 🔴 Sbagliato: dentro un gestore di eventi (per correggere, spostalo fuori!)
83
90
const theme = useContext(ThemeContext);
84
91
}
85
92
// ...
86
93
}
87
94
88
95
function Bad() {
89
96
const style = useMemo(() => {
90
-
// 🔴 Bad: inside useMemo (to fix, move it outside!)
97
+
// 🔴 Sbagliato: dentro useMemo (per correggere, spostalo fuori!)
91
98
const theme = useContext(ThemeContext);
92
99
return createStyle(theme);
93
100
});
@@ -96,63 +103,63 @@ function Bad() {
96
103
97
104
class Bad extends React.Component {
98
105
render() {
99
-
// 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
106
+
// 🔴 Sbagliato: dentro un componente classe (per correggere, scrivi un componente funzione al posto di una classe!)
100
107
useEffect(() => {})
101
108
// ...
102
109
}
103
110
}
104
111
```
105
112
106
-
You can use the[`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to catch these mistakes.
113
+
Puoi usare il plugin[`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)per individuare questi errori.
107
114
108
115
<Note>
109
116
110
-
[Custom Hooks](/learn/reusing-logic-with-custom-hooks)*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.
117
+
I [custom Hook](/learn/reusing-logic-with-custom-hooks)*possono* chiamare altri Hooks (è proprio il loro scopo). Funziona perché anche i custom Hook dovrebbero essere chiamati solo mentre un componente funzione viene renderizzato.
111
118
112
119
</Note>
113
120
114
-
## Mismatching Versions of React and React DOM {/*mismatching-versions-of-react-and-react-dom*/}
121
+
## Versioni non corrispondenti di React e React DOM {/*mismatching-versions-of-react-and-react-dom*/}
115
122
116
-
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).
123
+
Potresti usare una versione di `react-dom` (< 16.8.0) o`react-native` (< 0.59) che non supporta ancora gli Hooks. Puoi eseguire `npm ls react-dom`o`npm ls react-native`nella cartella della tua applicazione per verificare quale versione stai usando. Se ne trovi più di una, questo potrebbe creare problemi (ne parliamo di più sotto).
117
124
118
-
## Duplicate React {/*duplicate-react*/}
125
+
## React duplicato {/*duplicate-react*/}
119
126
120
-
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.
127
+
Affinché gli Hooks funzionino, l'import di `react`dal codice della tua applicazione deve risolvere lo stesso modulo dell'import di `react`dall'interno del pacchetto `react-dom`.
121
128
122
-
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.
129
+
Se questi import di `react`risolvono due oggetti export diversi, vedrai questo warning. Questo può succedere se **finisci accidentalmente con due copie**del pacchetto`react`.
123
130
124
-
If you use Node for package management, you can run this check in your project folder:
131
+
Se usi Node per la gestione dei pacchetti, puoi eseguire questo controllo nella cartella del tuo progetto:
125
132
126
133
<TerminalBlock>
127
134
128
135
npm ls react
129
136
130
137
</TerminalBlock>
131
138
132
-
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.
139
+
Se vedi più di un React, dovrai capire perché succede e correggere l'albero delle dipendenze. Ad esempio, forse una libreria che usi specifica `react`in modo errato come dipendenza (invece che come peer dependency). Finché quella libreria non viene corretta, le [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)sono una possibile soluzione temporanea.
133
140
134
-
You can also try to debug this problem by adding some logs and restarting your development server:
141
+
Puoi anche provare a debuggare questo problema aggiungendo alcuni log e riavviando il server di sviluppo:
135
142
136
143
```js
137
-
//Add this in node_modules/react-dom/index.js
144
+
//Aggiungi questo in node_modules/react-dom/index.js
138
145
window.React1=require('react');
139
146
140
-
//Add this in your component file
147
+
//Aggiungi questo nel file del tuo componente
141
148
require('react-dom');
142
149
window.React2=require('react');
143
150
console.log(window.React1===window.React2);
144
151
```
145
152
146
-
If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/react/react/issues/13991)includes some common reasons encountered by the community.
153
+
Se stampa `false`, potresti avere due React e devi capire perché è successo. [Questa issue](https://github.com/react/react/issues/13991)include alcuni motivi comuni riscontrati dalla community.
147
154
148
-
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.
155
+
Questo problema può presentarsi anche quando usi `npm link`o un equivalente. In quel caso, il tuo bundler potrebbe "vedere" due React — uno nella cartella dell'applicazione e uno nella cartella della tua libreria. Supponendo che `myapp`e`mylib`siano cartelle sorelle, una possibile correzione è eseguire `npm link ../myapp/node_modules/react`da`mylib`. In questo modo la libreria userà la copia di React dell'applicazione.
149
156
150
157
<Note>
151
158
152
-
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.
159
+
In generale, React supporta l'uso di più copie indipendenti nella stessa pagina (ad esempio, se un'app e un widget di terze parti lo usano entrambi). Si rompe solo se`require('react')`risolve in modo diverso tra il componente e la copia di `react-dom`con cui è stato renderizzato.
153
160
154
161
</Note>
155
162
156
-
## Other Causes {/*other-causes*/}
163
+
## Altre cause {/*other-causes*/}
157
164
158
-
If none of this worked, please comment in [this issue](https://github.com/react/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.
165
+
Se niente di tutto ciò ha funzionato, commenta in [questa issue](https://github.com/react/react/issues/13991)e cercheremo di aiutarti. Prova a creare un piccolo esempio riproducibile — potresti scoprire il problema mentre lo fai.
`act` from `react-dom/test-utils` has been deprecated in favor of `act` from `react`.
8
+
Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/warnings/react-dom-test-utils.md).
`act` da `react-dom/test-utils` è deprecato in favore di `act` da `react`.
15
+
16
+
Prima:
10
17
11
18
```js
12
19
import {act} from'react-dom/test-utils';
13
20
```
14
21
15
-
After:
22
+
Dopo:
16
23
17
24
```js
18
25
import {act} from'react';
19
26
```
20
27
21
-
## Rest of ReactDOMTestUtils APIS {/*rest-of-reactdomtestutils-apis*/}
28
+
## Resto delle API ReactDOMTestUtils {/*rest-of-reactdomtestutils-apis*/}
22
29
23
-
All APIs except `act`have been removed.
30
+
Tutte le API tranne `act`sono state rimosse.
24
31
25
-
The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/)for a modern and well supported testing experience.
32
+
Il team React consiglia di migrare i tuoi test a [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/)per un'esperienza di testing moderna e ben supportata.
react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals.
8
+
Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/warnings/react-test-renderer.md).
8
9
9
-
The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/start/intro) for a modern and well supported testing experience.
## new ShallowRenderer() warning {/*new-shallowrenderer-warning*/}
14
+
react-test-renderer è deprecato. Un warning viene mostrato ogni volta che chiami `ReactTestRenderer.create()` o `ReactShallowRender.render()`. Il pacchetto react-test-renderer resterà disponibile su NPM ma non sarà mantenuto e potrebbe rompersi con nuove funzionalità di React o modifiche agli internals di React.
13
15
14
-
The react-test-renderer package no longer exports a shallow renderer at `react-test-renderer/shallow`. This was simply a repackaging of a previously extracted separate package: `react-shallow-renderer`. Therefore you can continue using the shallow renderer in the same way by installing it directly. See [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer).
16
+
Il team React consiglia di migrare i tuoi test a [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) o [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/start/intro) per un'esperienza di testing moderna e ben supportata.
17
+
18
+
19
+
## Warning new ShallowRenderer() {/*new-shallowrenderer-warning*/}
20
+
21
+
Il pacchetto react-test-renderer non esporta più uno shallow renderer in `react-test-renderer/shallow`. Era semplicemente un reimpacchettamento di un pacchetto separato estratto in precedenza: `react-shallow-renderer`. Puoi quindi continuare a usare lo shallow renderer nello stesso modo installandolo direttamente. Vedi [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer).
0 commit comments