React日历应用从对象数组取值时出现undefined问题

1. 数组层级错误导致取值undefined #

你创建datesToAddContentTo时，错误地把map返回的数组又嵌套了一层，最终数组变成了二维结构（[ [{}, {}, {}, {}] ]）。当你用forEach遍历这个数组时，每次循环的obj其实是内层的整个数组，而非单个对象，自然obj.user和obj.date都会返回undefined。

修复数组创建代码 #

去掉外层多余的方括号，直接赋值map的返回结果：

const datesToAddContentTo = dateList.map((item) => {
  return {
    date: item.fullDate,
    user: item.user,
    isValid: isValid(
      parse(String(item.fullDate), "yyyy-MM-dd'T'HH:mm:ss.SSSX", new Date())
    ),
  };
});

console.log(datesToAddContentTo); // 现在是符合预期的一维对象数组

2. tileContent函数的逻辑问题 #

• forEach循环内的return不会终止函数执行，也无法向外返回JSX内容，应该用find方法定位匹配日期的对象后再返回对应内容。
• useCallback的依赖数组缺少datesToAddContentTo，会导致组件更新时，tileContent无法获取最新的数组数据。

修复tileContent代码 #

const tileContent = useCallback(({ date, view }) => {
  if (view !== "month") return null; // 非月视图直接返回空

  // 找到与当前日历日期匹配的对象
  const matchedDate = datesToAddContentTo.find(obj => {
    const parsedDate = parse(obj.date, "yyyy-MM-dd'T'HH:mm:ss.SSSX", new Date());
    return isSameDay(parsedDate, date);
  });

  // 根据匹配结果返回对应内容
  return matchedDate 
    ? <p className={`success ${matchedDate.user}`}>Success</p> 
    : <p className="fail">NOT Success</p>;
}, [datesToAddContentTo]); // 加入依赖数组，确保数据更新时函数同步更新

额外优化建议 #

可以提前将数组中的日期解析为Date对象，避免每次调用tileContent时重复解析，提升性能：

const datesToAddContentTo = dateList.map((item) => {
  const parsedDate = parse(String(item.fullDate), "yyyy-MM-dd'T'HH:mm:ss.SSSX", new Date());
  return {
    date: parsedDate, // 直接存储解析后的Date对象
    user: item.user,
    isValid: isValid(parsedDate),
  };
});

// 后续tileContent中无需重复解析
const matchedDate = datesToAddContentTo.find(obj => isSameDay(obj.date, date));

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