有什么方法可以抑制 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/