Я использую хук useAuth
для своего authContext
, чтобы я мог использовать хук для установки глобальных состояний для своих компонентов.
Теперь я пытаюсь перейти на страницу '/'
, если пользователь не вошел в систему, а также отобразить requireLoginAlert
пользователю на странице '/'
после того, как пользователь был перенаправлен. Однако при попытке включить функцию setRequireLoginAlert(true)
в requireAuth.js
я получил следующую ошибку.
Warning: Cannot update a component (`AuthProvider`) while rendering a different component (`RequireAuth`). To locate the bad setState() call inside `RequireAuth`
Мой requireAuth.js
:
const RequireAuth = () => {
const { auth, setRequireLoginAlert } = useAuth();
const location = useLocation();
return (
auth?.user
? <Outlet />
: <Navigate to='/' state = {{ from: location }} replace />
&& setRequireLoginAlert(true)
);
};
export default RequireAuth;
Мой AuthContext.js
const AuthContext = createContext({});
export const AuthProvider = ({ children }) => {
const [auth, setAuth] = useState({});
const [requireLoginAlert, setRequireLoginAlert] = useState(false);
return (
<AuthContext.Provider value = {{ auth, setAuth, requireLoginAlert, setRequireLoginAlert }}>
{children}
</AuthContext.Provider>
);
};
export default AuthContext;
Я пытался использовать useEffect
отображение оповещения всякий раз, когда location
менялось, но таким образом оповещение будет появляться всякий раз, когда я перехожу на другие страницы, что не идеально. Мне нужен триггер для изменения состояния requireLoginAlert
после того, как пользователь был перенаправлен без ошибок.
Не стесняйтесь оставить комментарий, если у вас есть какие-либо идеи. Большое спасибо.
да это точно проблема! Я решил это через useEffect на данный момент
Я думаю, что вы были на правильном пути с подходом useEffect.
Действительно, вы используете местоположение в массиве зависимостей, но вам также необходимо включить условие, основанное на текущей странице, чтобы requireLoginAlert
не вызывался каждый раз
Вы пробовали что-то вроде следующего фрагмента кода?
useEffect(
() => auth?.user && location === "/" && setRequireLoginAlert(true),
[auth?.user, location]
);
да ты прав. Я создал useEffect следующим образом: `useEffect(() => { if (!auth?.user && location.pathname === '/home/') setRequireLoginAlert(true); }, [auth?.user, location ]);` Работает нормально. Не уверен, что найду ошибку в будущем, так как делаю многостраничный сайт. Спасибо, что поделился!
Разве эта ошибка не появляется, потому что вы возвращаете компонент Navigate и вызываете функцию из своего контекста? Возможно, переместите этот вызов в useEffect, а в ответ отобразите только компонент.