reactjs - 有没有办法在组件安装后以特定间隔更新 react-bootstrap-daterangepicker 的日期范围？

Question

我想更新为组件定义的日期时间范围并以指定的时间间隔更新它。我能够将其设置为 DateRangeGlobalState 状态（在此处使用 Zusand），但 UI 与状态不一致。我还在文档中读到它应该只用作不受控制的组件，但我的好奇心不会放过它。这真的可以做到还是我应该放弃？这是我对 DateTimePicker 的实现：

import { PAGE_UPDATION_INTERVAL } from "app/store/types";
import "bootstrap-daterangepicker/daterangepicker.css";
import moment from "moment";
import React, { useEffect, useRef, useState } from "react";
import DateRangePicker from "react-bootstrap-daterangepicker";
import useDateRange from "./DateRangeGlobalState";

export default function DateTimePickerBootstrap() {
  const { dateRange, setDateRange } = useDateRange();
  const myRef = useRef();
  const keyRef = useRef(Date.now());
  var [currDate, setCurrDate] = useState({
    currRange: dateRange.rangeLabel,
    currStart: dateRange.fromDate,
    currEnd: dateRange.toDate,
  });

  var testRange = {
    "Last 10 Minutes": [moment().subtract(10, "minutes"), moment()],
    "Last 3 hours": [moment().subtract(3, "hours"), moment()],
    "Last 6 hours": [moment().subtract(6, "hours"), moment()],
    "Last 12 hours": [moment().subtract(12, "hours"), moment()],
    Today: [moment().startOf("day"), moment()],
    Yesterday: [
      moment().subtract(1, "days").startOf("day"),
      moment().subtract(1, "days").endOf("day"),
    ],
    "Last 7 Days": [moment().subtract(6, "days").startOf("day"), moment()],
    "Last 10 Days": [moment().subtract(9, "days").startOf("day"), moment()],
    "Last 30 Days": [moment().subtract(29, "days").startOf("day"), moment()],
    "This Month": [moment().startOf("month"), moment()],
    "Last Month": [
      moment().subtract(1, "month").startOf("month").startOf("day"),
      moment().subtract(1, "month").endOf("month").endOf("day"),
    ],
    [currDate.currRange]: [currDate.currStart, currDate.currEnd],
  };

  useEffect(() => {
    const intervalId = setInterval(() => {
      testRange = {
        "Last 10 Minutes": [moment().subtract(10, "minutes"), moment()],
        "Last 3 hours": [moment().subtract(3, "hours"), moment()],
        "Last 6 hours": [moment().subtract(6, "hours"), moment()],
        "Last 12 hours": [moment().subtract(12, "hours"), moment()],
        Today: [moment().startOf("day"), moment()],
        Yesterday: [
          moment().subtract(1, "days").startOf("day"),
          moment().subtract(1, "days").endOf("day"),
        ],
        "Last 7 Days": [moment().subtract(6, "days").startOf("day"), moment()],
        "Last 10 Days": [moment().subtract(9, "days").startOf("day"), moment()],
        "Last 30 Days": [
          moment().subtract(29, "days").startOf("day"),
          moment(),
        ],
        "This Month": [moment().startOf("month"), moment()],
        "Last Month": [
          moment().subtract(1, "month").startOf("month").startOf("day"),
          moment().subtract(1, "month").endOf("month").endOf("day"),
        ],
      };

      if (!testRange.hasOwnProperty(currDate.currRange)) {
        testRange[currDate.currRange] = [currDate.currStart, currDate.currEnd];
      } else {
        if (
          !(
            dateRange.rangeLabel === "Yesterday" ||
            dateRange.rangeLabel === "Last Month" ||
            dateRange.rangeLabel.includes("To")
          )
        ) {
          setDateRange({
            fromDate: testRange[dateRange.rangeLabel][0],
            toDate: testRange[dateRange.rangeLabel][1],
            rangeLabel: currDate.currRange,
          });
        }
      }

      myRef.current.setStartDate(testRange[dateRange.rangeLabel][0]);
      myRef.current.setEndDate(testRange[dateRange.rangeLabel][1]);

      keyRef.current = Date.now();
    }, PAGE_UPDATION_INTERVAL);

    return () => {
      clearInterval(intervalId);
    };
  }, [dateRange, testRange, currDate]);

  const handleCallback = (start, end, label) => {
    let lbl;
    keyRef.current = Date.now();
    if (label === "Custom Range" || label === null) {
      lbl = `${start.format("DD-MM-YYYY")}  To  ${end.format("DD-MM-YYYY")}`;
      testRange[lbl] = [start, end];
    } else {
      lbl = label;
    }

    setCurrDate({ currRange: lbl, currStart: start, currEnd: end });

    setDateRange({
      fromDate: start,
      toDate: end,
      rangeLabel: lbl,
    });
  };

  return (
    <div>
      <DateRangePicker
        ref={myRef}
        key={keyRef.current}
        initialSettings={{
          startDate: dateRange.fromDate,
          endDate: dateRange.toDate,
          timePicker: true,
          ranges: testRange,
          timePickerSeconds: true,
          showCustomRangeLabel: true,
        }}
        onCallback={handleCallback}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            textAlign: "center",
            margin: "1.5rem 0 0 0",
            cursor: "pointer",
          }}
        >
          <DateRangeIcon />
          <div>
            {dateRange.rangeLabel}
          </div>
        </div>
      </DateRangePicker>
    </div>
  );
}

下面的代码显示了 DateRangeGlobalState 组件：

import create from "zustand";
import moment from "moment";
// import { window } from 'd3'

let endDateTime = moment();
let startDateTime = moment().subtract(
  3,
  "hours"
);
let label = "Last 3 hours";

const useDateRange = create((set) => ({
  dateRange: {
    fromDate: startDateTime,
    toDate: endDateTime,
    rangeLabel: label,
  },
  setDateRange: (payload) => set((state) => ({ dateRange: payload })),
}));

export default useDateRange;
``