Reactjs 警告：文本内容不匹配。服务器："；I'；“我退出”；客户：“；I'；“我在”；下一季

（我已经到处寻找解决方案）

我在nextjs项目中使用

universal cookie

，这是在控制台中返回警告的简单代码：

import React, { useState } from "react";
import Cookies from "universal-cookie";
import styles from "../styles/Home.module.css";

export default function Home() {
  const cook = new Cookies();
  const [session, setSession] = useState(cook.get("key"));
  const setCookie = () => {
    cook.set("key", "hola", { secure: true });
    setSession(cook.get("key"));
  };
  const deleteCookie = () => {
    cook.remove("key", { secure: true });
    setSession(undefined);
  };

  return (
    <div className={styles.container}>
      <button onClick={() => setCookie()}>Save Cookie</button>
      <button onClick={() => deleteCookie()}>Delete Cookie</button>
      {session ? <>I'm in</> : <>I'm out</>}
    </div>
  );
}

import React，{useState}来自“React”；
从“通用cookie”导入cookie；
从“./styles/Home.module.css”导入样式；
导出默认函数Home（）{
const cook=新饼干（）；
const[session，setSession]=useState（cook.get（“key”）；
常量setCookie=（）=>{
set（“key”，“hola”，“secure:true}）；
设置会话（cook.get（“key”）；
};
常量deleteCookie=（）=>{
move（“key”{secure:true}）；
设置会话（未定义）；
};
返回(
setCookie（）}>保存Cookie
deleteCookie（）}>删除Cookie
{会话？我在：我在}
);
}

当“我在”并刷新页面时，控制台中会出现以下警告：

import React, { useState } from "react";
import Cookies from "universal-cookie";
import styles from "../styles/Home.module.css";

export default function Home() {
  const cook = new Cookies();
  const [session, setSession] = useState(cook.get("key"));
  const setCookie = () => {
    cook.set("key", "hola", { secure: true });
    setSession(cook.get("key"));
  };
  const deleteCookie = () => {
    cook.remove("key", { secure: true });
    setSession(undefined);
  };

  return (
    <div className={styles.container}>
      <button onClick={() => setCookie()}>Save Cookie</button>
      <button onClick={() => deleteCookie()}>Delete Cookie</button>
      {session ? <>I'm in</> : <>I'm out</>}
    </div>
  );
}

---

浏览器上呈现的HTML与服务器上生成的HTML不匹配，因为

cook.get（“key”）

在这两种格式中返回的内容不同。要解决此问题，您可以在

useffect

中移动设置状态

导出默认函数Home（）{
const cook=新饼干（）；
const[session，setSession]=useState（）；
//此处的`setCookie`和`deleteCookie`代码
useffect（（）=>{
设置会话（cook.get（“key”）；
}, []);
返回(
setCookie（）}>保存Cookie
deleteCookie（）}>删除Cookie
{会话？我在：我在}
);
}

作为一个旁注，可以考虑使用或替代。