时间戳

首页 > 解决方案 > 从当前日期开始，每次增加 5 天

javascript - 从当前日期开始，每次增加 5 天

问题描述

我目前正在尝试根据当前日期增加 5 天。我成功地做到了这一点，但产生了一些不想要的结果。当我递增时，我目前正在将它们推入一个数组，并且随着我的递增，列表将继续增长。我试图一次只显示 5 个结果。如果我当前的日期是 dec.16，我只想从 dec.16-dec.20 开始显示。如果我从那里增加，我只想从 dec.21-dec.25.. 等开始显示。与维护日期数组和切片或类似的东西相反，我想在每次增加时重置数组。我的代码如下：

import React, { useEffect, useState, useCallback } from "react";
import "./styles.scss";

export default function App() {
  const [days, setDays] = useState(null);
  const [inc, setInc] = useState(5);

  const getDaysArray = async (s, e) => {
    let a = [];
    for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
      a.push(new Date(d).toString());
    }

    return a;
  };

  const getDays = useCallback(async () => {
    var currentDate = new Date();
    var numberOfDayToAdd = inc;
    let newday = currentDate.setDate(currentDate.getDate() + numberOfDayToAdd);
    let today = new Date() + inc;
    const data = await getDaysArray(today, newday);
    setDays(data);
  }, [inc]);

  useEffect(() => {
    getDays(inc);
  }, [getDays, inc]);

  const decrement = () => {
    setInc((state) => state - 5);
  };

  const increment = () => {
    setInc((state) => state + 5);
  };

  return (
    <div>
      <button onClick={increment}>inc</button>
      <button onClick={decrement}>dec</button>
      {days &&
        days.map((item) => {
          return <div>{item}</div>;
        })}
    </div>
  );
}

这是一个用于调试的代码沙箱https://codesandbox.io/s/wizardly-feistel-tj8pj?file=/src/App.js

标签： javascriptreactjs

解决方案

我不明白您要做什么，但是，您可以重置列表或使用数组切片，例如days.slice(Math.max(days.length - 5, 1)) 对于您的问题，我为您编辑了解决方案

它是 inc 增加了 5，然后是 10，然后是 15，所以解决方案是删除 4 天today并增加 inc

  const getDays = useCallback(async () => {
    var currentDate = new Date();
    let newday = new Date().setDate(currentDate.getDate() + inc-1);
    let today = new Date().setDate(currentDate.getDate() + inc - 5);
    const data = await getDaysArray(today, newday);
    setDays(data);
  }, [inc]);

也不要忘记添加key={item.id}到您的列表组件

推荐阅读