Next.js: неверный вызов перехватчика. Хуки можно вызывать только внутри тела функционального компонента. ⇐ Javascript

[Anonymous]

Когда я пытаюсь реализовать эту логику поиска,

Код: Выделить всё

"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;

Когда я ввожу что-то в этот поиск, Next.js выдает ошибку:

Неверный вызов перехватчика. Хуки можно вызывать только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

• Возможно, у вас несовпадающие версии React и средства визуализации (например, React DOM).
• Возможно, вы нарушаете правила перехватчиков.
• В одном приложении может быть более одной копии React.

См. https://react.dev/link/invalid-hook-call для получения советов о том, как отладить и устранить эту проблему.



Но я не понимаю, что не так в моем AuthContext.

Код: Выделить всё

"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;
}

Мой AuthContext работал нормально, пока я не добавил логику поиска.


Подробнее здесь: https://stackoverflow.com/questions/798 ... y-of-a-fun