多个时区 7000 个会议和 Flatlist 的 JSON 文件

Question

我是一名从事宠物项目的基础开发人员，并为通过 Flatlist 在 React Native 应用程序中显示此内容的最佳方法而陷入困境。

首先，这是 JSON 文件的格式。文件中大约有 7,000 条记录，其中许多记录位于不同的时区。

name:       "Meeting 1"
timezone:   "America/Los_Angeles"
day:        2
time:       "19:00"
url:        "https://teams.meetings.com/xyz321"

我想做的是；

1. 获取用户的本地时区并
2. 仅过滤当天发生的所有会议并且
3. 过滤接下来一小时内发生的这些会议，并且
4. 将这些会议详细信息以用户的本地日期/时间显示为 React Native Flatlist 中的单独项目。

如果有人可以提供一些指导，我将非常感激。 DateTime 函数很难掌握。

import React, { useEffect, useState } from 'react';
import { FlatList, StyleSheet, View, Text } from 'react-native';
import DeviceInfo from 'react-native-device-info';

// Assuming meetingsData is an array of objects parsed from the JSON file
const meetingsData = require('../data/Meetings.json');

const MeetingList = () => {
  const [filteredMeetings, setFilteredMeetings] = useState([]);

  useEffect(() => {
    async function filterMeetings() {
      const userTimezone = DeviceInfo; // Get user's timezone
      const currentDate = new Date(); // Get current date/time

      const filtered = meetingsData.filter(meeting => {
        const meetingDate = new Date(
          `${meeting.day} ${meeting.time} ${meeting.timezone}`
        );

        // Convert meeting time to user's timezone
        meetingDate.toLocaleString('en-US', { timeZone: userTimezone });

        // Filter meetings occurring on the current day
        const isSameDay =
          meetingDate.getDate() === currentDate.getDate() &&
          meetingDate.getMonth() === currentDate.getMonth() &&
          meetingDate.getFullYear() === currentDate.getFullYear();

        // Filter meetings happening within the next hour
        const isInNextHour =
          meetingDate.getTime() > currentDate.getTime() &&
          meetingDate.getTime() <= currentDate.getTime() + 3600000; // 3600000 milliseconds = 1 hour
          console.log('x: ' + isSameDay);
          console.log('y: ' + isInNextHour);
          return isSameDay && isInNextHour;
      });

      setFilteredMeetings(filtered);
    }

    filterMeetings();
  }, []);

  const renderMeetingItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>Name: {item.name}</Text>
      <Text style={styles.title}>Time: {item.time}</Text>
      <Text style={styles.title}>URL: {item.url}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
        <FlatList
        data={filteredMeetings}
        renderItem={renderMeetingItem}
        keyExtractor={(item, index) => index.toString()}
        />
    </View>
  );
};

Answer 1

我建议使用日期库来简化代码，就像 luxon 一样。

这是我实现这一目标的方法：

import { useMemo } from 'react'
import { DateTime } from 'luxon'

import { useMeetings } from '../queries/meetings'
import { Meeting } from '../types'

export function Meetings() {
  const { data: meetings, isLoading } = useMeetings()

  const nextMeetings = useMemo(() => {
    return meetings?.filter((meeting) => {
      const meetingDate = DateTime.fromISO(meeting.date)
      const diff = meetingDate.diffNow('hours').hours

      return diff > 0 && diff <= 1
    })
  }, [])

  function _renderMeeting(meeting: Meeting, idx: number) {
    const time = DateTime.fromISO(meeting.date).toFormat('hh:mm');

    return (
      <div key={idx}>
        <div>Name: {meeting.name}</div>
        <div>Time: {time}</div>
        <div>URL: {meeting.url}</div>
      </div>
    )
  }

  if (isLoading) return <div>Loading...</div>

  return (
    nextMeetings?.map(_renderMeeting)
  )
}

export default Meetings

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>