Question

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

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

在我的react组件中：

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

<Mfont>是使用样式化组件样式化的标准span元素；

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.removeInterval(interval);
  });

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

这样，我们每1秒钟运行一次函数，检查document.cookie的值是否等于先前的值。由于该值始终是字符串，因此使用严格的比较运算符===是安全的，并且不要对此进行任何检查。当值不匹配时，我们运行状态钩子提供的setLatestCookie，使组件再次呈现，因此利用将再次运行的quantity函数。

Answer 2

您是否尝试过将长度值作为prop传递给组件？然后，您可以将该值分配给组件状态。状态更改时，您可以执行任何操作。

在React组件中使用从函数返回的值（自动更新）

2 个答案: