Ich erhalte die folgende Fehlermeldung, wenn ich versuche, sie makeStyles()
mit einer Komponente mit Lebenszyklusmethoden zu verwenden:
Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Körpers einer Funktionskomponente aufgerufen werden. Dies kann aus einem der folgenden Gründe geschehen:
- Möglicherweise stimmen Versionen von React und des Renderers nicht überein (z. B. React DOM).
- Möglicherweise verstoßen Sie gegen die Hook-Regeln
- Möglicherweise haben Sie mehr als eine Kopie von React in derselben App
Unten finden Sie ein kleines Beispiel für Code, der diesen Fehler verursacht. Andere Beispiele weisen untergeordneten Elementen ebenfalls Klassen zu. Ich kann in der MUI-Dokumentation nichts finden, was andere Verwendungsmöglichkeiten makeStyles
und die Möglichkeit zur Verwendung von Lebenszyklusmethoden zeigt.
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { Container, makeStyles } from '@material-ui/core';
import LogoButtonCard from '../molecules/Cards/LogoButtonCard';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
}));
const classes = useStyles();
class Welcome extends Component {
render() {
if (this.props.auth.isAuthenticated()) {
return <Redirect to="/" />;
}
return (
<Container maxWidth={false} className={classes.root}>
<LogoButtonCard
buttonText="Enter"
headerText="Welcome to PlatformX"
buttonAction={this.props.auth.login}
/>
</Container>
);
}
}
export default Welcome;
quelle
invalid hook call
Fehler im Kreis herumgelaufen - Danke, dass du mich in die richtige Richtung gebracht hast !!makeStyles()
(styles = makeStyles(theme => ({...})
) verwendet . Wenn Sie einen themenabhängigen Stil wünschen, lesen Sie auch meinen vorherigen Kommentar.Ich habe
withStyles
statt verwendetmakeStyle
EX :
quelle
Am Ende haben wir die Verwendung der Klassenkomponenten gestoppt und Funktionskomponenten erstellt, die über
useEffect()
die Hooks-API für Lebenszyklusmethoden verwendet wurden . Auf diese Weise können Sie weiterhinmakeStyles()
mit Lifecycle-Methoden arbeiten, ohne die Komplikation der Erstellung von Komponenten höherer Ordnung hinzufügen zu müssen . Welches ist viel einfacher.Beispiel:
quelle
useEffect
. Im obigen Fall setzen Sie den Anfangszustand von userName auf eine leere Zeichenfolge und versichern nach einem API-Aufruf, dassuseEffect
Sie ihn verwenden würdensetUserName(response)
. Ich werde oben ein Beispiel und einen Link zu einem Artikel mit weiteren Informationen zur Verwendung von useEffect für Lebenszyklusmethoden hinzufügen. dev.to/prototyp/…useStyles
ist ein React-Hook, der für die Verwendung in Funktionskomponenten vorgesehen ist und nicht in Klassenkomponenten verwendet werden kann.Aus Reaktion:
Auch sollten Sie
useStyles
Hook in Ihrer Funktion wie aufrufen ;Wenn Sie Hooks verwenden möchten, wird hier Ihre kurze Klassenkomponente in eine Funktionskomponente geändert.
🏓 auf ↓ CodeSandBox ↓
quelle
Anstatt die Klasse in eine Funktion zu konvertieren, besteht ein einfacher Schritt darin, eine Funktion zu erstellen, die das jsx für die Komponente enthält, die die 'Klassen' verwendet, in Ihrem Fall die
<container></container>
und diese Funktion dann innerhalb der Rückgabe der Klasse render () aufruft. als Tag. Auf diese Weise verschieben Sie den Hook zu einer Funktion aus der Klasse. Es hat perfekt für mich funktioniert. In meinem Fall war es eine,<table>
die ich in eine Funktion - TableStmt außerhalb - verschoben und diese Funktion innerhalb des Renderings als aufgerufen habe<TableStmt/>
quelle