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

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

我想更新为组件定义的日期时间范围并以指定的时间间隔更新它。我可以将它设置为 DaterangeGlobalState 状态（在此处使用 Zustand），但 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"),"Last 6 hours": [moment().subtract(6,"Last 12 hours": [moment().subtract(12,Today: [moment().startOf("day"),Yesterday: [
      moment().subtract(1,"days").startOf("day"),moment().subtract(1,"days").endOf("day"),],"Last 7 Days": [moment().subtract(6,"Last 10 Days": [moment().subtract(9,"Last 30 Days": [moment().subtract(29,"This Month": [moment().startOf("month"),"Last Month": [
      moment().subtract(1,"month").startOf("month").startOf("day"),"month").endOf("month").endOf("day"),[currDate.currRange]: [currDate.currStart,currDate.currEnd],};

  useEffect(() => {
    const intervalId = setInterval(() => {
      testRange = {
        "Last 10 Minutes": [moment().subtract(10,Yesterday: [
          moment().subtract(1,"Last 30 Days": [
          moment().subtract(29,moment(),"Last Month": [
          moment().subtract(1,};

      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;
``