React JS中如何移除到达时间等于当前时间的数组对象元素

问题根源 #

1. 时间对象复用导致混乱：你反复修改同一个today对象的分钟数，后续的traintime都是基于前一次修改后的时间生成的，并非你期望的独立时间点。
2. 时间格式不统一：toLocaleTimeString的参数使用错误（第一个参数应为语言环境，而非小时/分钟），导致当前时间和列车时间的字符串格式不一致，直接比较会失败。
3. 过滤逻辑错误：pop()只能删除数组最后一个元素，逻辑完全不对；filter没生效大概率是因为时间字符串格式不匹配，且你没有将过滤后的结果用于渲染。

解决方案 #

以下是修正后的完整代码，解决了上述所有问题：

import React, { useState, useEffect } from 'react';

function Home() {
  // 用状态存储当前时间，确保时间变化时组件自动重渲染
  const [currentTime, setCurrentTime] = useState(new Date());

  // 每秒更新一次当前时间
  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  // 统一时间格式化规则，避免格式差异导致比较失败
  const formatTime = (date) => {
    return date.toLocaleTimeString('en-US', { 
      hour12: false, 
      hour: '2-digit', 
      minute: '2-digit', 
      second: '2-digit' 
    });
  };

  const currentFormattedTime = formatTime(currentTime);
  const date1 = currentTime.toLocaleDateString();

  // 为每个列车创建独立的时间对象，避免互相干扰
  const getTrainTime = (minutes) => {
    const trainDate = new Date();
    trainDate.setMinutes(minutes, 0, 0);
    return formatTime(trainDate);
  };

  const traintime1 = getTrainTime(31);
  const traintime2 = getTrainTime(17);
  const traintime3 = getTrainTime(19);
  const traintime4 = getTrainTime(11);
  const traintime5 = getTrainTime(18);

  const arrivalarr = [
    { TrainName: "train1", TrainNo: "1234", platformno: "1", arrivalTime: traintime1 },
    { TrainName: "train2", TrainNo: "1235", platformno: "2", arrivalTime: traintime2 },
    { TrainName: "train3", TrainNo: "1236", platformno: "3", arrivalTime: traintime3 },
    { TrainName: "train4", TrainNo: "1237", platformno: "4", arrivalTime: traintime4 },
    { TrainName: "train5", TrainNo: "1238", platformno: "5", arrivalTime: traintime5 }
  ];

  // 过滤掉与当前时间匹配的列车
  const filteredTrains = arrivalarr.filter(train => train.arrivalTime !== currentFormattedTime);

  return (
    <div>
      <div>
        <span>Arrival table</span><br />
        <span>Bangalore Time {currentFormattedTime} date {date1}</span><br />
        train name     trainno   platformno   arrivalTime<br />
        {filteredTrains.map(({ TrainName, TrainNo, platformno, arrivalTime }) => (
          <p key={TrainName}> {TrainName} {TrainNo} {platformno} {arrivalTime}</p>
        ))}
      </div>
    </div>
  );
}

export default Home;

关键修改说明 #

• 实时时间更新：通过useState和useEffect实现每秒刷新当前时间，确保过滤逻辑能动态响应时间变化。
• 独立时间对象：每个列车的时间都用新的Date对象创建，避免修改同一个对象导致的时间混乱。
• 统一时间格式：用formatTime函数将所有时间转为相同格式的字符串，保证比较的准确性。
• 正确过滤逻辑：使用filter生成过滤后的数组，并在渲染时使用这个新数组，原数组保持不变。

如果想进一步提升准确性，可以改用时间戳比较（避免字符串格式的潜在问题）：

• 将列车时间存储为时间戳（trainDate.getTime()）
• 当前时间也取时间戳（currentTime.getTime()）
• 过滤时直接比较数值：train.arrivalTime !== currentTime.getTime()

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