Проблема такая, что я вхожу в аккаунт, у меня сразу выдаёт ошибку что React не может правильно обработать некоторые данные или состояние в приложении
скриншот -
https://skr.sh/sTo5xlrTBBI
обновляю страницу и пишет в консоли про сохранённый токен, но информации пользователя с его ником в Navbar всё так же нет
скриншот -
https://skr.sh/sToEGA2y7KI
мой Navbar
const Navbar: React.FC<NavbarProps> = ({ openSidebar, setOpenSidebar }) => {
const [isHovering, setIsHovering] = useState<boolean>(false);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const user = useSelector(selectUser); // Получаем данные пользователя из состояния
const isLogged = !!user;
console.log("selectUser:",selectUser)
console.log("Данные пользователя из selectUser:", user);
return (
{isLogged ? `Привет, ${user.username}` : (
<button onClick={() => setIsModalOpen(true)}>Войти</button>
)}
)
Данные в console.log("Данные пользователя из selectUser:", user); приходят правильные. А ошибка остаётся ++
мой app.jsx ==================================
import { BrowserRouter as Router } from "react-router-dom";
import { Suspense, lazy, useEffect, useState } from "react";
import "react-tooltip/dist/react-tooltip.css";
import "react-toastify/dist/ReactToastify.css";
import { UserProvider } from "./UserContext";
const Header = lazy(() => import("./components/header/index"));
const AppRoutes = lazy(() => import("./Routes"));
function App() {
const [onlineUsers, setOnlineUsers] = useState(0);
const [recentCaseOpenings, setRecentCaseOpenings] = useState([]);
const [notification, setNotification] = useState();
return (
<UserProvider> {/* Исправлено использование UserProvider */}
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Header />
<AppRoutes />
</Suspense>
</Router>
</UserProvider>
);
}
export default App;
Мой UserContext =============================
import { User } from "./app/types"; // Импортируем тип User
import { createContext, useContext, useState } from "react";
// Определение интерфейса для контекста
interface UserContextType {
user: User | null; // Данные пользователя
setUser: React.Dispatch<React.SetStateAction<User | null>>; // Функция для установки пользователя
toggleUserFlow: () => void; // Функция для переключения состояния пользовательского интерфейса
isLogged: boolean; // Статус входа пользователя
openUserFlow: boolean; // Статус открытия пользовательского интерфейса
toggleUserData: (data: User | null) => void; // Функция для обновления данных пользователя
}
// Создание контекста
const UserContext = createContext<UserContextType | undefined>(undefined);
// Провайдер контекста
const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [user, setUser] = useState<User | null>(null); // Состояние пользователя
const [isLogged, setIsLogged] = useState<boolean>(false); // Статус входа
const [openUserFlow, setOpenUserFlow] = useState<boolean>(false); // Статус открытия пользовательского интерфейса
// Функция для переключения состояния пользовательского интерфейса
const toggleUserFlow = () => {
setOpenUserFlow(prev => !prev);
};
// Функция для обновления данных пользователя
const toggleUserData = (data: User | null) => {
console.log('Обновление данных пользователя:', data); // Проверка данных
if (data) {
setUser(data);
setIsLogged(true); // Устанавливаем статус входа
} else {
setUser(null);
setIsLogged(false); // Устанавливаем статус входа
}
};
return (
<UserContext.Provider value={{ user, setUser , toggleUserFlow, isLogged, openUserFlow, toggleUserData }}>
{children}
</UserContext.Provider>
);
};
// Хук для использования контекста
const useUserContext = () => {
const context = useContext(UserContext);
if (context === undefined) {
throw new Error("useUser Context must be used within a UserProvider");
}
return context;
};
export { UserProvider, useUserContext };
