Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate invalid-hook-call-warning #96

Open
wants to merge 1 commit into
base: master
from

Conversation

@michaelneu
Copy link
Contributor

commented Oct 5, 2019

I wasn't sure how to approach these expressions, so I settled with this:

  • function component
  • dependency tree
    • Projektabhängigkeiten
  • as a dependency (rather than a peer dependency)
    • als dependency (statt als peer dependency)
  • this issue
    • diese Diskussion
    • dieser Thread
@netlify

This comment has been minimized.

Copy link

commented Oct 5, 2019

Deploy preview for de-reactjs ready!

Built with commit ab79437

https://deploy-preview-96--de-reactjs.netlify.com

@tesseralis tesseralis referenced this pull request Oct 9, 2019
43 of 88 tasks complete

* ✅ Call them at the top level in the body of a function component.
* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html).
* ✅ Rufe sie ganz oben im Rumpf von React-Funktions-Komponente auf.

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
* ✅ Rufe sie ganz oben im Rumpf von React-Funktions-Komponente auf.
* ✅ Rufe sie ganz oben im Body von Funktions-Komponenten auf.

Maybe we should leave it as it is, or?


You can only call Hooks **while React is rendering a function component**:
Du kannst Hooks nur aufrufen **während React eine React-Funktions-Komponente rendert**:

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
Du kannst Hooks nur aufrufen **während React eine React-Funktions-Komponente rendert**:
Du kannst Hooks nur aufrufen **während React eine Funktions-Komponente rendert**:
*Call them at the top level in the body of a function component.
*Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html).
*Rufe sie ganz oben im Rumpf von React-Funktions-Komponente auf.
*Rufe sie ganz oben im Rumpf von [eigenen Hooks](/docs/hooks-custom.html) auf.

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
* ✅ Rufe sie ganz oben im Rumpf von [eigenen Hooks](/docs/hooks-custom.html) auf.
* ✅ Rufe sie ganz oben im Body von [eigenen Hooks](/docs/hooks-custom.html) auf.

```js{2-3,8-9}
function Counter() {
// ✅ Good: top-level in a function component
// ✅ Gut: ganz oben in einer React-Funktions-Komponente

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
// ✅ Gut: ganz oben in einer React-Funktions-Komponente
// ✅ Gut: ganz oben in einer Funktions-Komponente
const [count, setCount] = useState(0);
// ...
}
function useWindowWidth() {
// ✅ Good: top-level in a custom Hook
// ✅ Gut: ganz oben in einem eigenen Hook

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
// ✅ Gut: ganz oben in einem eigenen Hook
// ✅ Gut: ganz oben in einer eigenen Hook

Sounds better. What do you mean?

>
>[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.
>[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 React-Funktions-Komponente aufgerufen werden dürfen.

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
>[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 React-Funktions-Komponente aufgerufen werden dürfen.
>[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.

## Duplicate React {#duplicate-react}
Damit Hooks funktionieren muss der `react` Import in deiner Anwendung zur selben Version vom `react` Import im `react-dom` Paket aufgelöst werden.

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
Damit Hooks funktionieren muss der `react` Import in deiner Anwendung zur selben Version vom `react` Import im `react-dom` Paket aufgelöst werden.
Damit Hooks funktionieren muss der `react`-Import in deiner Anwendung zur selben Version vom `react- Import im `react-dom`-Paket aufgelöst werden.

npm ls react

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.
Wenn React mehr als einmal gelistet wird, dann musst du herausfinden warum das passiert und deine 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.

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
Wenn React mehr als einmal gelistet wird, dann musst du herausfinden warum das passiert und deine 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.
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.

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.
Das Problem kann zudem auftreten wenn du `npm link` oder Ähnliches verwendest. In diesem Fall könnte dein Bundler zwei Reacts finden, eines im Projektfolder 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.

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
Das Problem kann zudem auftreten wenn du `npm link` oder Ähnliches verwendest. In diesem Fall könnte dein Bundler zwei Reacts finden, eines im Projektfolder 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.
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.

>Note
>Beachte

This comment has been minimized.

Copy link
@ph1p

ph1p Oct 11, 2019

Member
Suggested change
>Beachte
>Hinweis

#10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.