React+Meteor中Tracker重计算函数报错：无效时间值问题求助

当card为undefined时，createdAt会变为undefined，传入date-fns的isThisYear和format函数就会触发无效时间值的错误。可以通过条件判断仅在card存在且createdAt有效时执行日期格式化逻辑，具体修改如下：

方案一：分步条件判断（可读性高） #

import React from "react";
import Child from "./Child";
import { format, isThisYear } from "date-fns";

const Sample = ({ card }) => {
  // 用可选链安全获取createdAt，避免card为undefined时报错
  const createdAt = card?.createdAt;
  let createdDate = ''; // 可替换为你需要的默认占位符，比如'--'

  // 仅当createdAt存在时执行格式化逻辑
  if (createdAt) {
    const dateFormat = isThisYear(createdAt) ? "MMM d" : "MMM d, yyyy";
    createdDate = format(createdAt, dateFormat);
  }

  return (
    <>
      <Child createdDate={createdDate} />
    </>
  );
};

export default Sample;

方案二：三元表达式简化代码 #

如果偏好更简洁的写法，可将日期逻辑合并为一行：

import React from "react";
import Child from "./Child";
import { format, isThisYear } from "date-fns";

const Sample = ({ card }) => {
  const createdAt = card?.createdAt;
  // 用三元表达式判断，存在则格式化，否则返回默认值
  const createdDate = createdAt 
    ? format(createdAt, isThisYear(createdAt) ? "MMM d" : "MMM d, yyyy") 
    : '';

  return (
    <>
      <Child createdDate={createdDate} />
    </>
  );
};

export default Sample;

关键改动说明 #

1. 用card?.createdAt替代原有解构：可选链操作符会在card为undefined时直接返回undefined，不会抛出解构错误。
2. 添加条件判断：确保只有createdAt存在时才调用date-fns的函数，避免传入无效时间值触发RangeError，同时解决Tracker recompute function异常。

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