javascript - 使用从 react 组件中的函数返回的值(自动更新)

Question

我希望使用从此函数返回的值:

const quantity = () => {
    let cookies = document.cookie.split("?");
    return cookies.length;
}

在我的 react 组件中:

const cart_button = (
    <Mfont>{quantity}</Mfont>
);

<Mfont>是一个标准的 span 元素，使用 styled-components 进行样式设置；

console.log(cookies.length)

根据预期的长度给了我一个数字，但我不知道如何将其插入到我的组件中并在每次 cookie.length 时更新增加。

Answer 1

根据this answer ，2019 年检测 cookie 更改的最可靠方法仍然是检查 document.cookie on interval .

在 React 16.8 中，我们有 useEffect hook我们可以与 useState hook 一起使用定期运行一个函数，并在 document.cookie 的值更新时导致组件更新，例如

import React, { useState, useEffect } from 'react';

const MyComponent = props => {
  const [latestCookie, setLatestCookie] = useState(document.cookie);

  useEffect(() => {
    const detectCookieUpdate = document.cookie !== latestCookie && setLatestCookie(document.cookie);
    const interval = window.setInterval(detectCookieUpdate, 1000);

    return () => window.clearInterval(interval);
  });

  return (
    <Mfont>{quantity()}</Mfont>
  );
};

这样，我们每 1 秒运行一个函数来检查 document.cookie 的值是否等于之前的值。由于该值始终是一个字符串，因此使用严格比较运算符 === 是安全的，并且在此基础上不进行任何检查。当值不匹配时，我们运行状态钩子(Hook)提供的 setLatestCookie ，导致组件再次渲染，因此使用将再次运行的 quantity 函数。