Nextjs：删除cookie时组件不更新DOM，但添加cookie时更新

Question

我在_app.js 中的<Component {...pageProps} /> 上添加了一个<Navbar /> 组件。登录成功后，我添加了一个 cookie Cookies.set('isLoggedIn', true,..) 并将 DOM 从显示 Login 和 Signup 更新为在导航栏上显示 Logout 按钮。但是当我单击Logout 时，这个isLoggedin cookie 被删除，因此，DOM 现在应该在导航栏上再次显示Login 和Signup。相反，它一直显示Logout。

那么，如何刷新 DOM，以便在删除 cookie 时显示 Login 和 Signup？

登录代码，成功设置cookie：

axios
  .post(url, data, { withCredentials: true }, (Headers = config))
  .then(Cookies.set('isLoggedIn', true, { secure: true }, { sameSite: 'lax' }));

登出代码和 DOM 更改代码：

const isLoggedIn = Cookies.get('isLoggedIn') ? true : false;

const handleLogout = () => {
  axios
    .post(devURL, (Headers = config), { withCredentials: true })
    .then(Cookies.remove('isLoggedIn'));
  ...
};


return ({
  isLoggedIn === false ? (
    <div className={styles.authOpt}>
      <Link href="/login">
        <button className={styles.authButton}>Login</button>
      </Link>
      <Link href="/signup">
        <button className={styles.authButton}>SignUp</button>
      </Link>
    </div>
  ) : (
    <div className={styles.authOpt}>
      <button className={styles.authButton} onClick={handleLogout}>
        Log out
      </button>
    </div>
  );
});

这很可能是一个水合问题，因为改变的状态是通过 console.log() 输出来的，但它并没有改变 DOM。

Answer 1

如果不更改 props / state，则无法重新渲染 React 组件。

因此，您的 isLoggedIn 变量必须是该组件状态的一部分。

const [isLoggedIn, setIsLoggedIn] = useState(Cookies.get('isLoggedIn') ? true : false);
// --------------------------------------------^ initial value of the state retrieved from the cookies

const handleLogout = () => {
  axios.post(devURL, (Headers = config), { withCredentials: true }).then(() => {
    Cookies.remove('isLoggedIn');
    setIsLoggedIn(false);
    // -----^
  });
  ...
};


return ({
  isLoggedIn === false ? (
    <div className={styles.authOpt}>
      <Link href="/login">
        <button className={styles.authButton}>Login</button>
      </Link>
      <Link href="/signup">
        <button className={styles.authButton}>SignUp</button>
      </Link>
    </div>
  ) : (
    <div className={styles.authOpt}>
      <button className={styles.authButton} onClick={handleLogout}>
        Log out
      </button>
    </div>
  );
});