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
+
Du bist vermutlich wegen der folgenden Fehlermeldung hier:
8
8
9
-
> Hooks can only be called inside the body of a function component.
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
+
Es gibt drei häufige Gründe warum du diese Meldung angezeigt bekommst:
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.Du nutzt **unterschiedliche Versionen**von React und React DOM.
14
+
2.Du **verletzt die [Regeln von Hooks](/docs/hooks-rules.html)**.
15
+
3.Du hast vielleicht**mehrere React Versionen** in der selben Anwendung.
16
16
17
-
Let's look at each of these cases.
17
+
Sehen wir uns die unterschiedlichen Ursachen im Detail an.
18
18
19
-
## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
19
+
## Unterschiedliche Versionen von React und 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
+
Du nutzt eventuell eine Version von `react-dom` (< 16.8.0) oder`react-native` (< 0.59), die Hooks noch nicht unterstützt. Um das zu prüfen, führe `npm ls react-dom`oder`npm ls react-native`im Ordner deiner Anwendung aus und prüfe welche Version du nutzt. Wenn du mehr als eine Version nutzt, kann das andere Probleme nach sich ziehen (mehr dazu weiter unten).
22
22
23
-
## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
23
+
## Verletzen der Regeln von Hooks {#breaking-the-rules-of-hooks}
24
24
25
-
You can only call Hooks**while React is rendering a function component**:
25
+
Du kannst Hooks nur aufrufen**während React eine Funktions-Komponente rendert**:
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
+
* ✅ Rufe sie ganz oben im Body von Funktions-Komponenten auf.
28
+
* ✅ Rufe sie ganz oben im Body von [eigenen Hooks](/docs/hooks-custom.html) auf.
29
29
30
-
**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
30
+
**Mehr dazu in den [Regeln von Hooks](/docs/hooks-rules.html).**
To avoid confusion, it’s **not**supported to call Hooks in other cases:
46
+
Um Missverständnisse zu vermeiden ist es **nicht**möglich Hooks anders aufzurufen:
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
+
* 🔴 Rufe Hooks nicht in Klassenkomponenten auf.
49
+
* 🔴 Rufe Hooks nicht in Eventhandlern auf.
50
+
* 🔴 Rufe Hooks nicht in Funktionen auf, die an`useMemo`, `useReducer` oder`useEffect` übergeben werden.
51
51
52
-
If you break these rules, you might see this error.
52
+
Wenn du diese Regeln verletzt, siehst du möglicherweise diesen Fehler.
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
+
// 🔴 Schlecht: innerhalb eines Eventhandlers (zum Beheben den Aufruf nach außen ziehen)
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
+
// 🔴 Schlecht: innerhalb von useMemo (zum Beheben den Aufruf nach außen ziehen)
66
66
const theme = useContext(ThemeContext);
67
67
return createStyle(theme);
68
68
});
@@ -71,52 +71,51 @@ function Bad2() {
71
71
72
72
class Bad3 extends React.Component {
73
73
render() {
74
-
// 🔴 Bad: inside a class component
74
+
// 🔴 Schlecht: innerhalb einer Klassenkomponente
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
+
Du kannst das [`eslint-plugin-react-hooks`Plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)nutzen um einige dieser Fehler zu finden.
82
82
83
-
>Note
83
+
>Beachte
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
+
>[Eigene Hooks](/docs/hooks-custom.html)*dürfen* andere Hooks aufrufen (das ist ihr Sinn), da eigene Hooks auch nur während dem Rendern einer Funktions-Komponente aufgerufen werden dürfen.
86
86
87
+
## Mehrere React Versionen {#duplicate-react}
87
88
88
-
## Duplicate React {#duplicate-react}
89
+
Damit Hooks funktionieren muss der `react`-Import in deiner Anwendung zur selben Version vom `react`-Import im `react-dom`-Paket aufgelöst werden.
89
90
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.
91
+
Wenn diese Imports zu zwei verschiedenen Exports aufgelöst werden, siehst du diese Warnung, zum Beispiel wenn du zufällig **zwei Versionen** des `react`Pakets hast.
91
92
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.
93
-
94
-
If you use Node for package management, you can run this check in your project folder:
93
+
Wenn du NPM als Paketmanager nutzt, kannst du das mit dem folgenden Befehl von deinem Projektordner aus testen:
95
94
96
95
npm ls react
97
96
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.
97
+
Wenn React mehr als einmal gelistet wird, dann musst du herausfinden warum das passiert und es in deinen Projektabhängigkeiten beheben. Beispielsweise kann eine deiner Bibliotheken `react`fälschlicherweise als *dependency* (statt als *peer dependency*) deklarieren. Bis diese Bibliothek den Fehler behebt kannst du versuchen das Problem mittels [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)zu vermeiden.
99
98
100
-
You can also try to debug this problem by adding some logs and restarting your development server:
99
+
Du kannst außerdem versuchen das Problem mittels Hinzufügen von Logging oder dem Neustart deines Entwicklungsservers zu ermitteln:
101
100
102
101
```js
103
-
//Add this in node_modules/react-dom/index.js
102
+
//Füge das zu node_modules/react-dom/index.js hinzu
104
103
window.React1=require('react');
105
104
106
-
//Add this in your component file
105
+
//Füge das zu deiner Komponente hinzu
107
106
require('react-dom');
108
107
window.React2=require('react');
109
108
console.log(window.React1===window.React2);
110
109
```
111
110
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.
111
+
Wenn dadurch `false`ausgegeben wird, dann hast du eventuell zwei Reacts und musst herausfinden warum das passiert. [Diese Diskussion](https://github.com/facebook/react/issues/13991)enthält einige häufige Gründe, auf die die Community gestoßen ist.
113
112
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.
113
+
Das Problem kann zudem auftreten wenn du `npm link`oder Ähnliches verwendest. In diesem Fall könnte dein Bundler zwei Reacts finden, eines im Projektordner und eines im Ordner einer Bibliothek. Angenommen,`myapp`und`mylib`befinden sich im selben Ordner, eine mögliche Lösung ist`npm link ../myapp/node_modules/react`von`mylib` auszuführen, wodurch die Bibliothek das React des Projektordners nutzt.
115
114
116
-
>Note
115
+
>Hinweis
117
116
>
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.
117
+
>React unterstützt das Verwenden mehrerer verschiedener Versionen auf einer Seite (beispielsweise wenn eine Anwendung und ein Drittanbieter-Element sie nutzen). Der Fehler tritt nur auf wenn `require('react')`zu verschiedenen Versionen in einer Komponente und in `react-dom`aufgelöst werden.
119
118
120
-
## Other Causes {#other-causes}
119
+
## Andere Gründe {#other-causes}
121
120
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.
121
+
Wenn dir keiner der obigen Gründe geholfen hat, kommentiere bitte in [diesem Thread](https://github.com/facebook/react/issues/13991)und wir werden versuchen dir zu helfen. Versuche ein kleines Beispiel zu erstellen, welches den Fehler hervorruft - eventuell findest du dein Problem dabei.
0 commit comments