客户端浏览器上的 cookie 更改时触发？ - 反应 JS

Question

我打算使用 React js 向现有的 php 站点添加一个新功能。当客户端浏览器端的特定 cookie 更改时，我想做一些事情。此 cookie 用于在反应中对用户进行身份验证。

我同时使用“react-cookie”、“js-cookie”库来查看和创建 cookie。

如何在客户端浏览器端更改cookie时触发？

我使用了 useEffect 但它仅在我使用“setState”更改 cookie 时触发。在浏览器上手动更改 cookie 时未检测到它。

const [cookies, setCookie, removeCookie] = useCookies(['presence'])

  useEffect(()=>{

    setCookie("presence","test");

  },[])

  useEffect(()=>{
    console.log("cookies changed");
  },[cookies])
 

有什么办法可以完成这个任务吗？

Answer 1

setCookie 没有回调函数，因此您无法在同一函数中更改 cookie。您可以使用以下代码。

const [cookies, setCookie, removeCookie] = useCookies(['presence']);
const [data, setData]=useState();

  useEffect(()=>{

    setCookie("presence","test");
    setData({"presence":"test"})
  },[])

  useEffect(()=>{
    console.log("cookies changed");
  },[data])

只需在当前钩子中使用数据状态即可。

Answer 2

您可以通过使用当前 cookie 值检查您的“authToken”状态值来更新每次渲染时的 cookie，如果它发生变化，您可以更新状态变量强制 useEffect 触发。

这是一个使用“js-cookie”的实现

import Cookies from "js-cookie";

function App({children}) {
  const [authToken, setAuthToken] = useState(Cookies.get("presence"));
  useEffect(() => {
    // your useEffect code 
  }, [authToken]);


  // Update token with every render when its value has changed.
  const presenceCookie = Cookies.get("presence");
  if (authToken !== presenceCookie ) {
    setAuthToken(presenceCookie);
  }

  return (
    <div>
      {children}
    </div>
  );
}