reactjs - 警告:预期的服务器 HTML 包含匹配项在. ---- Next.js/反应
. ---- Next.js/反应
问题描述
这是我第一次使用 next.js,我遇到了一些问题......
所以我只是正常做我的应用程序,我查看了开发工具,有这个问题
现在,我的第一个想法是,好吧,我没有关闭 html 标签,我查看了我的 Navbar 和 AuthContext 组件,这不是问题,所以,我真的不知道发生了什么,我希望你能帮助我。
让我告诉你组件
导航栏
import { NavbarHeader } from "./NavbarStyled";
import Part1 from "./Parts/Part1";
import Part2 from "./Parts/Part2";
import Part3 from "./Parts/Part3";
const Navbar = () => {
if (typeof window !== "undefined") {
var auth = JSON.parse(localStorage.getItem("Auth"));
}
return (
<>
{auth ? (
<NavbarHeader>
{/* Go home icon - search bar */}
<Part1 />
{/* Middle Icons */}
<Part2 />
{/* User information */}
<Part3 />
</NavbarHeader>
) : (
<div></div>
)}
</>
);
};
export default Navbar;
这是 AuthContext
import { createContext } from "react";
import {
Actions,
dataObject,
LOGIN,
LOGOUT,
LOGINLOADING,
LOGINNOLOADING,
REGISTERLOADING,
REGISTERNOLOADING
} from "../GlobalInterfaces/AuthContextInterfaces";
import { useReducer } from "react";
import { useContext } from "react";
interface Istate {
loginLoading: boolean;
registerLoading: boolean;
data?: dataObject | null;
}
const DefaultState = createContext<Istate>({
loginLoading: false,
registerLoading: false
});
const DispatchActions = createContext(null);
const localReducer = (state: Istate, action: Actions): Istate => {
switch (action.type) {
case LOGINLOADING:
return {
...state,
loginLoading: true
};
case LOGINNOLOADING:
return {
...state,
loginLoading: false
};
case REGISTERLOADING:
return {
...state,
registerLoading: true
};
case REGISTERNOLOADING:
return {
...state,
registerLoading: false
};
case LOGIN:
localStorage.setItem("Auth", JSON.stringify({ ...action.payload }));
return {
...state,
loginLoading: false,
registerLoading: false,
data: action.payload
};
case LOGOUT:
localStorage.removeItem("Auth");
return {
...state,
data: null
};
default:
return state;
}
};
export const AuthContext = ({ children }: { children: React.ReactNode }) => {
const [state, dispatch] = useReducer(localReducer, {
registerLoading: false,
loginLoading: false,
data: null
});
return (
<DefaultState.Provider value={state}>
<DispatchActions.Provider value={dispatch}>
{children}
</DispatchActions.Provider>
</DefaultState.Provider>
);
};
export const AuthData = () => useContext(DefaultState);
export const AuthActions = () => useContext(DispatchActions);
这个问题是什么意思,可能是什么原因造成的?
谢谢你的时间 !
解决方案
您的服务器和浏览器呈现的 html 输出不匹配。我相信罪魁祸首是你的Navbar
组件,html
在服务器上生成的只是一个空的 div,而在浏览器中它将是<NavBarHeader>
内容。
您auth
只需要在浏览器中运行逻辑,在 Next.js 中执行的方式是使用useEffect
.
//Navbar
const [auth,setAuth] = useState()
useEffect(()=>{
var auth = JSON.parse(localStorage.getItem("Auth"));
setAuth(auth)
},[])
推荐阅读
- reactjs - 如何呈现反应导航而不是组件?
- swift - Swift 将三位数 Base64 数字转换为 Int
- javascript - 如何显示 d3.js 美国地图,其州外的州名指向它
- javascript - 如何读取文件?
- python - 在 seaborn.despine() 上动态设置轴偏移
- python - 寻找一种pythonic方法来查找嵌套列表中的所有交换可能性
- authentication - 在 Flexdashboard Rmarkdown 上添加身份验证
- xml - XSD 唯一性:为什么 field/@xpath="." 不行?
- java - MockMvc 控制器测试并返回 NullPointerException
- java - Findbugs [恶意代码漏洞 | EI_EXPOSE_REP2] 不抛出自写类