如何为 Reactjs cookie 添加监听器答案

【问题标题】：How to add listener for Reactjs cookies如何为 Reactjs cookie 添加监听器
【发布时间】：2020-05-01 18:12:26
【问题描述】：

我在 1 个组件 (Menu.js) 中设置了一个 React cookie，并尝试在另一个组件 (Home.js) 中监听它

目前使用的是universal-cookie：https://www.npmjs.com/package/universal-cookie，并且有一个addChangeListener函数。但是，我似乎无法让它工作，当我在 Menu.js 中设置 cookie 时，Home.js 中的这段代码 sn-p 根本不会触发更新。

const cookies = new Cookies();

cookies.addChangeListener(onCookieChange);

function onCookieChange() {
  console.log("Noticed cookie change!")
}

根据其他stackoverflow答案尝试像这样绑定onCookieChange：

cookies.addChangeListener(this.onCookieChange.bind(this));

得到了这个错误：

TypeError: Cannot read property 'onCookieChange' of undefined

【问题讨论】：

标签： javascript reactjs cookies listener

【解决方案1】：

您可以使用onChanged 原生事件。在设置或删除 cookie 时向其添加一个 eventListener 以进行监视。

查看 MDN 文档以获取使用示例。 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies/onChanged

【讨论】：

这个 API 不是浏览器原生的。它仅适用于 chrome 扩展