React Hooks haben die Art und Weise, wie wir funktionale Komponenten in React schreiben, revolutioniert und bieten eine übersichtliche und leistungsstarke Möglichkeit, Zustände und Seiteneffekte zu verwalten.
Doch wie bei jeder neuen Funktion gibt es auch hier Regeln und Richtlinien. Ein häufiger Fehler, auf den React-Entwicklerinnen und -Entwickler stoßen können, ist der Fehler „React Hooks müssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden“.
In diesem Artikel gehen wir auf die Details dieses Fehlers ein, erklären, warum er auftritt, und zeigen, wie man ihn beheben kann.
Was ist die Ursache für den Fehler „React Hooks müssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook Funktion aufgerufen werden“?
Bei der Verwendung von React Hooks gibt es bestimmte Regeln. Viele React-Entwicklerinnen und -Entwickler übergehen diese Regeln beim Erlernen von React, was zu Fehlern führt. Einer dieser Fehler lautet: „React Hooks müssen in einer React Function-Komponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden“.
Dieser Fehler tritt auf, wenn zwei wichtige Dinge passieren:
- Verwendung von React Hooks in Klassenkomponenten
- Aufrufen von React Hooks innerhalb einer verschachtelten Funktion
React Hooks, wie useState, useEffect und useContext, sind dafür gedacht, auf der obersten Ebene einer funktionalen Komponente oder einer benutzerdefinierten Hook-Funktion aufgerufen zu werden. Außerdem sollten sie nur in funktionalen Komponenten und nicht in Klassenkomponenten aufgerufen werden. Dies sind zwei wichtige Regeln von React Hooks, die sicherstellen, dass Hooks in React-Komponenten korrekt und konsistent verwendet werden.
Wenn Hooks an ungültigen Stellen aufgerufen werden, erhältst du diese Fehlermeldung: „React Hooks müssen in einer React Function-Komponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden“. Dieser ESLint-Fehler soll verhindern, dass Hooks auf eine Weise verwendet werden, die zu unerwartetem Verhalten und Fehlern in deiner React-Anwendung führen kann.
2 Möglichkeiten, den Fehler „React Hooks müssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden“ zu beheben
Dieser Fehler kann auf verschiedene Arten behoben werden, je nachdem, wie du den React Hook missbräuchlich verwendet hast.
1. React Hooks niemals in Klassenkomponenten aufrufen
Hooks sind nur für funktionale Komponenten oder benutzerdefinierte Hooks gedacht – denn sie nutzen den Call Stack der funktionalen Komponenten, um den Zustand und den Lebenszyklus der Komponente zu verwalten. Klassenkomponenten verfügen nicht über diesen Call Stack, daher kannst du Hooks nicht direkt in ihnen verwenden.
import React, { useState } from 'react';
class Counter extends React.Component {
state = { count: 0 };
render() {
const [count, setCount] = useState(0);
// Error: React Hooks must be called in a React function component or a custom React Hook function
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
}
export default Counter;Wenn du das tust, bekommst du diesen Fehler:
Es gibt jedoch einige Möglichkeiten, dies zu beheben, je nachdem, was du bevorzugst. Du kannst dich entscheiden, state und setState mit Klassenkomponenten zu verwenden, die Komponente in eine funktionale Komponente umzuwandeln oder eine Higher-Order Component (HOC) zu verwenden.
A. Die Klassenkomponente in eine funktionale Komponente umwandeln
Hooks können nur dann funktionieren, wenn du eine funktionale Komponente verwendest. Das liegt daran, dass Hooks für die Arbeit mit funktionalen Komponenten konzipiert sind.
Im folgenden Beispiel wird die vorherige Klassenkomponente in eine funktionale Komponente umgewandelt:
import { useState } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}B. Eine übergeordnete Komponente (HOC) verwenden
Eine Möglichkeit, Hooks in einer Klassenkomponente zu verwenden, ist die Verwendung einer Higher-Order Component (HOC).
Eine HOC ist eine Funktion, die eine Komponente nimmt und eine neue Komponente mit zusätzlichen Eigenschaften oder Funktionen zurückgibt. Hier ist ein Beispiel dafür, wie du eine HOC verwenden kannst, um einer Klassenkomponente Hooks zu geben:
import React, { useState } from 'react';
function withHooks(WrappedComponent) {
return function(props) {
const [count, setCount] = useState(0);
return (
< WrappedComponent count={count} setCount={setCount} {...props} />
);
};
}
class MyComponent extends React.Component {
render() {
const { count, setCount } = this.props;
return (
< div>
< p>Count: {count}< /p>
< button onClick={() => setCount(count + 1)}>Increment< /button>
< /div>
);
}
}
export default withHooks(MyComponent);C. Zustände in einer Klassenkomponente verwenden
Angenommen, du willst die Syntax deiner Komponente nicht ändern. Du kannst dich entscheiden, state und setState anstelle des useState Hooks zu verwenden:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleIncrement}>Increment</button>
</div>
);
}
}
export default MyComponent;2. Niemals React Hooks innerhalb einer verschachtelten Funktion aufrufen
Eine klare Regel für React Hooks ist, dass alle Hooks auf der obersten Ebene einer funktionalen Komponente oder einer eigenen Hook-Funktion aufgerufen werden sollten. Wenn du eine Hook innerhalb einer verschachtelten Funktion aufrufst, hast du gegen diese Regel verstoßen.
Im folgenden Beispiel wird der useState Hook in der Funktion handleClick aufgerufen:
import React, { useState } from 'react';
function MyComponent() {
let count = 0;
function handleClick() {
const [count, setCount] = useState(0);
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
export default MyComponent;Dadurch wird der folgende Fehler ausgelöst:
Du kannst das Problem beheben, indem du den Hook außerhalb der Funktion verschiebst – auf die oberste Ebene deiner Funktionskomponente:
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
export default MyComponent;Zusammenfassung
In diesem Artikel hast du erfahren, was den Fehler „React Hooks müssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden“ verursacht und wie er behoben werden kann.
Befolge immer die Regeln für React Hooks, wenn du mit ihnen arbeitest und sie in deinen React-Projekten verwendest, um Fehler wie diesen zu vermeiden.
Du suchst nach der idealen Hosting-Lösung für deine React-Anwendungen? Teste das Anwendungs-Hosting von Kinsta kostenlos!
Wir wollen von dir hören! Hast du diesen Fehler schon einmal erlebt? Wenn ja, wie hast du ihn behoben? Hast du eine andere Lösung gefunden, die nicht in diesem Artikel beschrieben wurde? Teile uns deine Meinung in den Kommentaren unten mit!
