小编Gau*_*ang的帖子

错误:useMediaQuery 是仅限客户端的挂钩

我正在尝试使用 NextJS 13.4.7 创建一个应用程序,并使用useMediaQuery钩子来检测视图是否是移动的。我的组件不是服务器组件,但我不断收到client-only挂钩错误。现在我的客户端组件是服务器组件的一部分,但从文档来看,它似乎是允许的。我错过了什么吗?下面是代码,

"use client";

import { useContext, useState, useEffect } from "react";
import PageDataContext from "@/contexts/PageDataContext";
import useMediaQuery from "@/hooks/useMediaQuery";
import { motion } from "framer-motion";

export default function Header() {
  const content = useContext(PageDataContext);
  const isSmallDevice = useMediaQuery("only screen and (max-width : 991px)");
  const [hideNav, setHideNav] = useState(isSmallDevice);
  const { home: homeContent } = content;
  const { navigation: navigationContent } = content;
  const { name } = homeContent;
  const [firstName, lastName] = name.split(" …
Run Code Online (Sandbox Code Playgroud)

reactjs next.js next.js13

9
推荐指数
1
解决办法
1006
查看次数

ngrx状态不断被覆盖

我正在使用ngrx来维护我的应用程序状态.

我有一个带有两个不同模块的angularjs4应用程序,它有两个不同的减速器,效果等.

一个用于验证,另一个用于获取电影列表.但我发现无论哪种效应被称为第二次它都会将全局应用状态写入其值.

我该如何防止这种情况?

这是我的auth模块中的状态定义

import {User} from "../../models/user";

export interface State {
    user: User,
    isLoggedIn: boolean,
    errors: any[]
}

export const initialState: State = {
    user: null,
    isLoggedIn:false,
    errors:[]
};
Run Code Online (Sandbox Code Playgroud)

这是auth减速机

import * as fromAuth from './auth.state';
import * as AuthActions from './auth.actions';

export function authReducer(state = fromAuth.initialState, action: AuthActions.ALL){
    console.log('authReducer', action, state);
    switch (action.type) {
        case AuthActions.LOGIN_WITH_GOOGLE:
            return {...state};

        case AuthActions.LOGIN_WITH_FACEBOOK:
            return {...state};

        case AuthActions.LOGIN_WITH_TWITTER:
            return {...state};

        case AuthActions.LOGOUT:
            return {...state, user: null, isLoggedIn:false};

        case AuthActions.LOGIN_SUCCESSFUL:
            return {...state}; …
Run Code Online (Sandbox Code Playgroud)

ngrx ngrx-effects angular ngrx-store

2
推荐指数
1
解决办法
457
查看次数

标签 统计

angular ×1

next.js ×1

next.js13 ×1

ngrx ×1

ngrx-effects ×1

ngrx-store ×1

reactjs ×1