写入 cookie 的 React 组件的奇怪行为

Question

我有一个简单的组件，它写入 cookie。最小的工作示例：

function App() {

  // stores cookie
  function setCookie(name: string, value: string, days: number) {
     ...
  }
  // reads cookie
  function getCookie(name: string) {
    ...
  }

  const cookieName = 'testCookie';

  const cookieValue = getCookie(cookieName);
  console.log('cookie value ', cookieValue);

  if (!cookieValue) {
    console.log('going to set cookie');
    setCookie(cookieName, 'test', 1);
    return <h2>Cookie was stored</h2>;
  }

  return <h2>Cookie already exists</h2>
}

export default App;

所以我想在第一次运行时设置 cookie 并让用户知道它与Cookie was stored 输出一起存储。在第二次运行时，将显示Cookie already exists。

但是，即使代码执行并记录going to set cookie，我也会立即看到Cookie already exists。 Cookie was stored 永远不会显示。

我认为发生了重新渲染，但由于 cookie value 仅记录一次，因此不一定是完全重新渲染。

如果您知道为什么会出现这种情况，请告诉我。 非常感谢！

Answer 1

您可以通过将其存储在状态变量中来解决此问题：

import {useState, useEffect} from 'react'
function App() {

    // stores cookie
  function setCookie(name: string, value: string, days: number) {
     ...
  }
  // reads cookie
  function getCookie(name: string) {
    ...
  }

  const [cookieState, setCookieState] = useState(null)

  useEffect(() => {
    const cookieName = 'testCookie';

    const cookieValue = getCookie(cookieName);
    console.log('cookie value ', cookieValue);

    if (!cookieValue) {
      console.log('going to set cookie');
      setCookieState(cookieName, 'test', 1);
    }
   }, [])

  return cookie ? <h2>Cookie already exists</h2> : <h2> Cookie doesn't exist </h2>
}

export default App;