在反应组件中使用从函数返回的值（自动更新）答案

【问题标题】：Using value returned from function in react component (auto-update)在反应组件中使用从函数返回的值（自动更新）
【发布时间】：2020-10-29 21:21:24
【问题描述】：

我希望使用从这个函数返回的值：

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

在我的反应组件中：

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

<Mfont> 是一个标准的 span 元素，带有 styled-components 样式；

console.log(cookies.length)

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

【问题讨论】：

React 组件仅在其 props 或 state 更改时更新。因此，您需要将此quantity 作为道具提供给组件，或者将其存储在状态中。如果没有看到您的其他组件，我就不能再说什么了。

标签： javascript reactjs

【解决方案1】：

根据this answer，在2019年检测cookie变化的最可靠方法是检查document.cookieon 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 的值是否等于之前的值。由于该值始终是一个字符串，因此使用严格的比较运算符=== 是安全的，并且在此之上不进行任何检查。当值不匹配时，我们运行状态钩子提供的setLatestCookie，导致组件再次渲染，因此使用将再次运行的quantity函数。

【讨论】：

【解决方案2】：

您是否尝试将长度值作为道具传递给您的组件？然后您可以将该值分配给组件状态。当状态改变时，做任何你想做的事。

【讨论】：