有什么方法可以抑制 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';
导航栏在布局中：
import { Wrapper, WrapperVariant } from "./Wrapper";
interface LayoutProps {
variant?: WrapperVariant;
}
export const Layout: React.FC<LayoutProps> = ({ children, variant }) => {
return (
<>
<NavBar />
<Wrapper variant={variant}>{children}</Wrapper>
</>
);
};
然后索引页面被包裹在布局中
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>
);
}
}
