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

Posted 2023-02-22

【中文标题】Nextjs：删除cookie时组件不更新DOM，但添加cookie时更新

【英文标题】：Nextjs: Component is not updating the DOM when cookie is removed but updating when cookie is added

【发布时间】：2021-08-05 11:35:54

【问题描述】：

我在_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。

【问题讨论】：

为了在 UI 上反映 isLoggedIn 值的变化，将其移动到状态（使用 React 的 useState hook）并在需要时相应地更新状态。

用useState 试过，但结果是一样的！

【参考方案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>
  );
);

【讨论】：

我以前使用过这种方法，它有一些自己的问题。页面刷新后反映的 DOM 变化等。所以我现在使用Context。