React中如何避免createdAt时间格式被重复转换的问题

问题根源 #

1. 直接修改原始数据：createdAtRefine函数直接改写了feedData.seeAdminAllFeeds等原始数组中对象的createdAt字段，将毫秒格式字符串转为了MM/DD格式。
2. 重复执行无效转换：切换页面返回后，useEffect因依赖项变化再次触发，此时原始数据的createdAt已经是MM/DD格式字符串，parseInt解析后得到无效数值（比如'10/8'会被解析为10），new Date(10)对应1970年1月1日，最终输出错误的'1/1'。

解决方案 #

方案1：不修改原始数据，创建副本处理 #

修改createdAtRefine函数，返回新的对象数组，完全不触碰原始数据：

const createdAtRefine = (datasum) => {
  return datasum.map(item => {
    // 先判断createdAt是否已经是MM/DD格式，避免重复转换
    if (!/^\d+\/\d+$/.test(item.createdAt)) {
      const timestamp = parseInt(item.createdAt, 10);
      const date = new Date(timestamp);
      return {
        ...item, // 拷贝原对象所有属性
        createdAt: `${date.getMonth() + 1}/${date.getDate()}`
      };
    }
    // 已是目标格式，返回原对象副本
    return {...item};
  });
};

方案2：确保转换仅执行一次 #

添加状态标记数据是否已处理，避免useEffect重复执行转换逻辑：

import { useState, useEffect } from 'react';

// 组件内状态
const [datasum, setDatasum] = useState([]);
const [isDataProcessed, setIsDataProcessed] = useState(false);

useEffect(() => {
  // 所有数据加载完成且未处理过才执行
  if (
    feedData && poemData && fpLikesData && fpCommentsData && pedometerData &&
    !isDataProcessed
  ) {
    // 合并所有原始数据的副本，不修改原数据
    const combinedRawData = [
      ...feedData.seeAdminAllFeeds,
      ...poemData.seeAdminAllPoems,
      ...fpLikesData.seeAdminAllLikes,
      ...fpCommentsData.seeAdminAllComments,
      ...pedometerData.seeAdminAllPedometers
    ].map(item => ({...item})); // 为每个对象创建副本

    const processedData = createdAtRefine(combinedRawData);
    setDatasum(processedData);
    setIsDataProcessed(true);
  }
}, [feedData, poemData, fpLikesData, fpCommentsData, pedometerData, isDataProcessed]);

方案3：结合两种方式（推荐） #

既不修改原始数据，又通过格式判断避免重复转换，同时兼容数据更新场景——即使后续原始数据有新增或更新，也能正确转换新的毫秒格式createdAt，不会影响已转换的项。

关键注意点 #

• 禁止直接修改props或外部状态的原始数据：React中props和状态应保持不可变性，直接修改会引发不可预测的副作用。
• 添加格式校验逻辑：转换前先判断createdAt格式，避免对已转换的字符串重复处理。
• 精准控制副作用执行时机：通过状态标记或依赖项管理，避免不必要的重复执行。

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