gpt4 book ai didi

javascript - 有什么办法可以抑制 React.FC 中的水化警告吗?

转载 作者:行者123 更新时间:2023-12-05 08:36:56 26 4
gpt4 key购买 nike

有什么方法可以抑制 React.FC 中的水化警告吗?我有一个警告 Did not expect server HTML to contain a <div> in <div>因为pause: isServer()东西,但我需要它来停止对服务器的不断请求。我能以某种方式替换这个东西还是只使用 supressHydrationWarning在这样的组件中?

export const NavBar: React.FC<NavBarProps> = ({}) => {  
const [{ fetching: logoutFetching }, logout] = useLogoutMutation();
const [{ data, fetching }] = useMeQuery({pause: isServer()});
console.log(data);
const router = useRouter();
...
};

是服务器:

export const isServer = () => typeof window === 'undefined';

NavBar 在布局中:

import { Wrapper, WrapperVariant } from "./Wrapper";

interface LayoutProps {
variant?: WrapperVariant;
}

export const Layout: React.FC<LayoutProps> = ({ children, variant }) => {
return (
<>
<NavBar />
<Wrapper variant={variant}>{children}</Wrapper>
</>
);
};

然后Index页面被Layout包裹

const Index = () => {
const [variables, setVariables] = useState({
limit: 15,
cursor: null as null | string,
});

const [{ data, error, fetching }] = usePostsQuery({
variables,
});

if (!fetching && !data) {
return <div>query failed: {error?.message}</div>;
}
return (
<Layout>
...
</Layout>
)
}

export default withUrqlClient(createUrqlClient, { ssr: true })(Index);
...

...并在打开 ssr 的情况下导出。

我将 Next.JS 与 Chakra-UI 一起使用,所以我认为它会在此处呈现?

import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import { ColorModeScript } from "@chakra-ui/react";

export default class Document extends NextDocument {
render() {
return (
<Html>
<Head />
<body>
{/* Make Color mode to persists when you refresh the page. */}
<ColorModeScript />
<Main />
<NextScript />
</body>
</Html>
);
}
}

最佳答案

如果您使用的是 NextJS,最简单的解决方案是使用 next/dynamic。

import dynamic from 'next/dynamic'
const NavBar = dynamic(() => import("/path/of/NavBar"), { ssr: false }) //<- set SSr to false

关于javascript - 有什么办法可以抑制 React.FC 中的水化警告吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67256421/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com