React中在map函数内实现每5秒刷新函数的问题求助

原代码的核心问题 #

1. 普通变量无法触发重渲染：borderColor是普通let变量，React不会追踪它的变化，就算变量更新了，UI也不会刷新。
2. 定时器堆积：在map循环里每次渲染都创建新的setInterval，会导致大量重复定时器，既浪费性能，也会导致逻辑混乱。
3. 日期比较不够可靠：用格式化后的字符串比较日期，虽然格式正确时能工作，但直接操作Date对象更准确，避免潜在的时区或格式问题。

修复方案 #

改用React状态触发重渲染，配合全局定时器，同时把样式计算改成纯函数：

1. 引入必要的Hook

import { useState, useEffect } from 'react';

2. 组件内状态与定时器逻辑

// 用一个状态标记触发重渲染，每次更新都会让组件重新计算样式
const [updateTick, setUpdateTick] = useState(0);

// 全局定时器，每5秒更新一次状态
useEffect(() => {
  const timer = setInterval(() => {
    setUpdateTick(prev => prev + 1);
  }, 5000);

  // 组件卸载时清理定时器，防止内存泄漏
  return () => clearInterval(timer);
}, []);

// 纯函数：根据item和当前时间返回对应的样式类名
const getBorderClass = (item) => {
  const now = new Date();
  const redTime = item?.red_time ? new Date(item.red_time) : null;
  const amberTime = item?.amber_time ? new Date(item.amber_time) : null;

  if (redTime && now > redTime) {
    return "order-list-right order-list-left-red";
  } else if (amberTime && now >= amberTime && (!redTime || now < redTime)) {
    return "order-list-right order-list-left-amber";
  }
  return "order-list-right order-list-left-green";
};

3. 渲染部分修改

{orderData?.data?.map((item) => (
  <div 
    className={getBorderClass(item)}
    onClick={() => orderItems(item)}
    key={item.id}
  >
    {/* 你的组件内容 */}
  </div>
))}

方案说明 #

• 用updateTick状态触发重渲染：每次定时器更新状态，组件会重新执行渲染逻辑，此时调用getBorderClass就能拿到最新的样式类。
• 全局定时器：只创建一次定时器，避免循环里重复创建的问题，同时在组件卸载时清理，防止内存泄漏。
• 纯函数计算样式：把样式逻辑抽成纯函数，不依赖外部变量，逻辑更清晰，也更容易调试和测试。

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