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>
  );
});

這很可能是水合問題，因為更改后的 state 是通過 console.log() output 來的，但它並沒有改變 DOM。

Answer 1

如果不更改props / state ，則無法重新渲染 React 組件。

因此，您的isLoggedIn變量必須是該組件的 state 的一部分。

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>
  );
});