javascript - 如何使用普通 JavaScript 和/或状态生成 future 日期？

Question

我正在构建一个 React Native 演出指南应用程序。

每个演出都由 Firebase 集合中的一个文档表示，并具有关联的日期属性。

我想向用户显示当天的演出。我还让用户点击“第二天的演出”按钮，然后显示第二天的演出列表，如下所示:

使用以下逻辑，我可以毫无问题地获得当天的演出:

  const day = new Date().getDate();
  const month = new Date().getMonth() + 1;
  const year = new Date().getFullYear();
  const dateToday = `${day}/${month}/${year}`;


  //Filtering through gigs to return only current day's gigs
  const gigsToday = gigs.filter((gig) => gig.date === dateToday);

...但是我如何显示第二天/前一天的演出？

这是我到目前为止所做的

1.) 将 new Date() 转换为 UTC+13 时间:

  const addHours = (numOfHours, date = new Date()) => {
    date.setTime(date.getTime() + numOfHours * 60 * 60 * 1000);
    return date;
  };

  let localDate = addHours(13);

2.) 设置一个 onPress 事件，将状态变量 daysAdded 加 1:

        <Pressable onPress={addDay}>
          <Text style={styles.buttonOptionsText}>next day's gigs</Text>
        </Pressable>

3.) 创建一个函数，将一天添加到 localDate 变量，然后将该新日期设置为状态变量 date:

const [date, setDate] = useState(dateToday);

...

  const addDay = () => {
    setDaysAdded(daysAdded + 1);
    localDate.setDate(localDate.getDate() + daysAdded);
    setDate(localDate);
  };

问题是初始日期状态不会立即加载，这意味着我无法根据日期有条件地呈现日期。我对其他事情感到困惑 - 我有一个想要操纵的日期，那么我是否将该日期设置为变量或状态？

无论如何，理想情况下，一旦用户按下“ future 几天的演出”按钮，应用程序就会有条件地呈现第二天的演出。

我还应该提到，从我的 Firebase Firestore 返回的日期采用“DD/MM/YYYY”形式

完整代码如下:

GigMap.js

import { useState, useEffect } from "react";
import { StyleSheet, Text, View, Pressable } from "react-native";
import MapView from "react-native-maps";
import { Marker, Callout } from "react-native-maps";
import CalloutView from "./CalloutView";
import { mapStyle } from "../util/mapStyle";
import { useGigs } from "../hooks/useGigs";

const GigMap = ({ navigation }) => {

  const [date, setDate] = useState(dateToday);
  const gigs = useGigs()
  const [daysAdded, setDaysAdded] = useState(1);



  const addHours = (numOfHours, date = new Date()) => {
    date.setTime(date.getTime() + numOfHours * 60 * 60 * 1000);
    return date;
  };

  let localDate = addHours(13);

  useEffect(() => {
    setDate(localDate);
  }, []);

  const addDay = () => {
    setDaysAdded(daysAdded + 1);
    localDate.setDate(localDate.getDate() + daysAdded);
    setDate(localDate);
  };

  //Generating current date
  const day = new Date().getDate();
  const month = new Date().getMonth() + 1;
  const year = new Date().getFullYear();
  const dateToday = `${day}/${month}/${year}`;


  //Filtering through gigs to return only current day's gigs
  const gigsToday = gigs.filter((gig) => gig.date === dateToday);

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Today's gigs</Text>
      <MapView
        initialRegion={{
          latitude: -41.29416,
          longitude: 174.77782,
          latitudeDelta: 0.03,
          longitudeDelta: 0.03,
        }}
        style={styles.map}
        customMapStyle={mapStyle}
      >
        {gigsToday.map((gig, i) => (
          <Marker
            key={i}
            coordinate={{
              latitude: gig.location.latitude,
              longitude: gig.location.longitude,
            }}
            image={require("../assets/Icon_Gold_48x48.png")}
          >
            <Callout
              style={styles.callout}
              onPress={() =>
                navigation.navigate("GigDetails", {
                  venue: gig.venue,
                  date: gig.date,
                  gigName: gig.gigName,
                  time: gig.time,
                })
              }
            >
              <CalloutView
                venue={gig.venue}
                date={gig.date}
                gigName={gig.gigName}
                time={gig.time}
                style={styles.calloutView}
              />
            </Callout>
          </Marker>
        ))}
      </MapView>
      <View style={styles.buttonOptions}>
        <Pressable>
          <Text style={styles.buttonOptionsText}>previous day's gigs</Text>
        </Pressable>
        <Pressable onPress={addDay}>
          <Text style={styles.buttonOptionsText}>next day's gigs</Text>
        </Pressable>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    alignItems: "center",
  },
  map: {
    height: 500,
    width: 330,
    margin: 10,
  },
  headerText: {
    color: "black",
    fontSize: 20,
    marginTop: 5,
  },
  callout: {
    width: 200,
    height: 100,
  },
  buttonOptions: {
    flexDirection: "row",
    justifyContent: "flex-start",
  },
  buttonOptionsText: {
    margin: 5,
  },
});

export default GigMap;

Answer 1

我认为你把事情过于复杂化了。首先，您不需要仅仅为了获取日期、月份和年份而创建所有新的单独 Date 对象。其次，您可以通过使用 toLocaleDateString() 并指定您想要的格式化样式的区域设置来按照您想要的方式格式化日期。第三，如果您使用 setDate()，原生 JavaScript Date 对象会自动处理月份和年份边界。

const today = new Date();
const day = today.getDate();
const month = today.getMonth() + 1;
const year = today.getFullYear();

// but you don't even need to do all that
// you can get it formatted for your locale
today.toLocaleDateString('en-NZ'); // '16/12/2022'

// initially this will be today
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

// initially this will be today
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);

// it automatically handles month and year boundaries
const yearEnd = new Date('12/31/2022');
console.log(yearEnd); // Sat Dec 31 2022 00:00:00 GMT-0500 (Eastern Standard Time)

yearEnd.setDate(yearEnd.getDate() + 1);
console.log(yearEnd);  // Sun Jan 01 2023 00:00:00 GMT-0500 (Eastern Standard Time)