Next.js使用Key斗篷SSR包时发生水合错误

Question

我使用的是带有最新next.js的@react key斗篷/ssr，刚刚启动，所以项目尽可能干净，我真正拥有的只是示例中安装的依赖项和_app.tsx和index.tsx。

_app.tsx是官方github示例的相同副本(除了到密钥斗篷的url(，index.tsx是下一个：

import { useKeycloak } from '@react-keycloak/ssr'
import {KeycloakInstance, KeycloakTokenParsed} from 'keycloak-js'
type ParsedToken = KeycloakTokenParsed & {
email?: string
username?: string
}
export default function Index() {
const { keycloak } = useKeycloak<KeycloakInstance>()
const parsedToken: ParsedToken | undefined = keycloak?.tokenParsed
const state = keycloak?.authenticated ? <span>{parsedToken?.username}</span> : <span>'Undefined'</span>;
function handleLoginButtonClick() {
if (keycloak) {
window.location.href = keycloak.createLoginUrl()
}
}
return (
<div>
{state}
<button className="btn btn-blue" onClick={() => handleLoginButtonClick()}>Login</button>
</div>
)
}

我的问题是，登录后我得到错误

Warning: Text content did not match. Server: "" Client: "'Undefined'"
at span
at div
at Index (webpack-internal:///./pages/index.tsx:18:84)

我曾尝试使用useEffect实现状态更改，但keycloak?.authenticated总是错误的，

let [state] = useState('No user');

useEffect(() => {
state = keycloak?.authenticated ? 'User' : 'No user';
}, []);

然后我尝试使用getServerSideProps，但后来我得到一个错误，即useKeycloak钩子只能在函数内部使用。

我还能尝试什么？

p.s.正在发生的事情的短gif/视频https://i.stack.imgur.com/mQo6h.jpg

Answer 1

通过稍微调整useEffect:找到了一个解决方案

const [username, setUsername] = useState('unknown')
useEffect(() => {
if (keycloak?.authenticated) {
setUsername(parsedToken?.email)
}
}, [keycloak?.authenticated])