Next.js: Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Körpers einer Funktionskomponente aufgerufen werden ⇐ JavaScript

[Anonymous]

Wenn ich versuche, diese Suchlogik zu implementieren,

Code: Select all

"use client"

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';

interface SearchProps {
setQuery: (query: string) => void;
}

const Search = ({setQuery}:SearchProps) =>{
const pathname = usePathname();
const { replace } = useRouter();
const searchParam = useSearchParams();

const handleSearch = (term: string)=>{
const params = new URLSearchParams(searchParam);

if (term){
params.set("query", term)
}
setQuery(params.toString());
console.log("params ", params.toString());
replace(`${pathname}?${params.toString()}`);
}
return (

 {handleSearch(e.target.value);}}
defaultValue={searchParam.get('query')?.toString()}
/>




);
}

export default Search;

Wenn ich etwas in diese Suche eingebe, gibt Next.js einen Fehler aus:

Ungültiger Hook-Aufruf. Hooks können nur innerhalb des Körpers einer Funktionskomponente aufgerufen werden. Dies kann aus einem der folgenden Gründe passieren:

• Möglicherweise haben Sie nicht übereinstimmende Versionen von React und dem Renderer (z. B. React DOM)
• Sie verstoßen möglicherweise gegen die Regeln von Hooks
• Sie haben möglicherweise mehr als eine Kopie von React in derselben App

Siehe https://react.dev/link/invalid-hook-call für Tipps zum Debuggen und Beheben dieses Problems.



Aber ich verstehe nicht, was in meinem AuthContext falsch ist.

Code: Select all

"use client";

import React, { createContext, useContext, useState, ReactNode } from "react";

// Helper to safely get the initial token from localStorage
const getInitialToken = (): string | null => {
if (typeof window !== 'undefined') {
return localStorage.getItem("token") || null;
}
return null;
};

// 1. Define the structure of the context data
interface AuthContextProps {
isLogged: boolean;
accessToken: string | null;
setToken: (access: string) => void;
clearTokens: () => void;
}

// 2. Create the Auth Context with default values
const AuthContext = createContext({
isLogged: false,
accessToken: null,
setToken: () => {},
clearTokens: () => {},
});

// 3.  Auth Provider Component
export const AuthProvider: React.FC = ({ children }) => {
const initialToken = getInitialToken();

// State for Access Token (persisted via initial load and setToken)
const [accessToken, setAccessToken] = useState(initialToken);

// Explicit state for logged status, initialized based on token presence
const [isLogged, setIsLogged] = useState(!!initialToken);

// Function to set the token in state and localStorage
const setToken = (access: string) => {
setAccessToken(access);
setIsLogged(true); // Explicitly set logged status
if (typeof window !== 'undefined') {
localStorage.setItem("token", access)
}
};

// Function to clear the token from state and localStorage
const clearTokens = () => {
setAccessToken(null);
setIsLogged(false); // Explicitly clear logged status
if (typeof window !== 'undefined') {
localStorage.removeItem("token");
}
};

return (

{children}

);
};

// 4. Custom hook to consume the Auth Context easily
export const useAuth = () => {

const context =   useContext(AuthContext);

if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}

return context;
}

Mein AuthContext hat einwandfrei funktioniert, bis ich diese Suchlogik hinzugefügt habe.