如何为 Reactjs cookies 添加监听器

Question

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

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

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

Answer 1

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

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