问题描述
我想更新为组件定义的日期时间范围并以指定的时间间隔更新它。我可以将它设置为 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;
``
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)