如何使用react-cookie设置午夜过期时自动重置默认值的Cookie？

没问题，这个需求其实可以通过在读取Cookie时添加判断逻辑来实现——react-cookie本身不会自动帮你重置过期Cookie，但我们可以手动处理，确保Cookie过期后自动设置默认值，而不是变成null。

核心思路 #

当Cookie在午夜过期后，浏览器会自动清除它，此时用cookies.get()获取到的值会是undefined或null。我们只需要在组件初始化（或应用启动）时检查这个Cookie是否存在：如果不存在，就设置你想要的默认值，并重新配置午夜过期规则。

类组件实现示例（匹配你的现有代码） #

因为你当前用的是类组件的this.props.cookies，可以在componentDidMount生命周期里处理逻辑：

componentDidMount() {
  // 读取当前的num_tag Cookie
  const numTag = this.props.cookies.get("num_tag");
  
  // 如果Cookie不存在（过期被清除），就设置默认值
  if (!numTag) {
    // 这里替换成你需要的默认值，比如0或者其他初始值
    const defaultNumTag = 0;
    // 重新设置Cookie，保持午夜过期的规则
    this.props.cookies.set("num_tag", defaultNumTag, { expires: this.getMidnight() });
  }
}

// 辅助函数：计算今天午夜的时间对象
getMidnight() {
  const now = new Date();
  // 设置为明天0点，也就是今天午夜
  const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
  return midnight;
}

函数组件实现示例（如果以后迁移到函数组件） #

如果你后续改用函数组件，也可以用useCookies Hook来实现同样的逻辑：

import { useCookies } from 'react-cookie';

function YourComponent() {
  const [cookies, setCookie] = useCookies(['num_tag']);
  
  // 计算午夜时间的辅助函数
  const getMidnight = () => {
    const now = new Date();
    return new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
  };

  // 组件挂载时检查并设置默认值
  useEffect(() => {
    const numTag = cookies.num_tag;
    if (!numTag) {
      const defaultNumTag = 0; // 你的默认值
      setCookie('num_tag', defaultNumTag, { expires: getMidnight() });
    }
  }, [cookies, setCookie]);
  
  // 其他组件逻辑...
  return <div>Your component content</div>;
}

额外注意事项 #

• 时区问题：如果你的用户分布在不同时区，getMidnight函数默认用的是本地时间。如果需要统一UTC午夜，可以调整时间计算逻辑。
• 复用逻辑：如果多个组件都需要用到这个Cookie，建议把检查和设置默认值的逻辑抽成一个自定义Hook或工具函数，避免重复代码。
• 更新Cookie时保持规则：当你在应用内主动更新num_tag的值时，记得依然带上{ expires: getMidnight() }配置，保证每次更新后还是午夜过期。

内容的提问来源于stack exchange，提问作者Sugam Devare