javascript - 日历函数调用不起作用无效的挂钩调用
问题描述
尝试将函数传递到日历组件时,我收到一条错误消息 - 不确定我打算如何进行此特定函数调用以更改正在获取的数据?
这是日历组件,
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function DateRange({startDate,endDate,handleChange}) {
return (
<DatePicker
selectsRange={true}
startDate={startDate}
endDate={endDate}
onChange={handleChange}
withPortal
/>
);
};
这是具有我想要处理Change 的功能的文件,
import useSWR from "swr";
import { useMemo, useState, useEffect } from "react";
import { apiRequest } from "../../../util/util";
import { format } from "date-fns";
import groupBy from "lodash/groupBy";
// import get from "lodash/get";
export default function useAnalytics() {
d.setMonth(d.getMonth() - 3);
const [isLoading, setIsLoading] = useState(false);
const [dateRange, setDateRange] = useState([d.getTime(), Date.now()]);
const [startDate, endDate] = dateRange;
const handleChange = (e) => {
setDateRange(e)
const { data: sentimentData } = useSWR(
`xx/xx/xxx-xx-xx?startTime=${startDate}&endTime=${endDate}`,
fetchSentiment
);
return sentimentData
}
const { data: sentimentData } = useSWR(
`xx/xx/xx-xx-xx?startTime=${startDate}&endTime=${endDate}`,
fetchSentiment
);
return {
sentimentData,
handleChange,
setDateRange,
startDate,
endDate,
};
}
这个 get 被传递到这里的另一个函数中,
import useAnalytics from './useAnalytics.js'
export default function Analytics() {
const {
sentimentData,
handleChange,
startDate,
endDate
} = useAnalytics();
return (
<div className="relative">
<div>
Calendar
<DateRange handleChange = {handleChange} startDate = {startDate} endDate = {endDate} />
</div>
....
);
}
当它调用该函数时,我收到一个无效的钩子调用错误。
我希望能够更改日期,然后发送查询以更改父函数中可用的数据。不确定当前的设置哪里出错了?
更新
下面的工作真的很好!现在用于查询的日期格式错误,
目前正在尝试此代码,
const handleChange = e => {
setDateRange(e);
setDateRange(Date(dateRange[0]).getTime(),Date(dateRange[1].getTime()))
};
这不起作用,因为函数 getTime 不会将值转换为任何东西。
这是日历的返回值,
console.log("type of data: ",typeof startDate,"start Date: ", startDate,"EndDate: ", endDate)
type of data: object start Date: Mon Aug 09 2021 00:00:00 GMT+1000 (Australian Eastern Standard Time) EndDate: Wed Aug 18 2021 00:00:00 GMT+1000 (Australian Eastern Standard Time)
解决方案
useSWR
是一个钩子,你不应该在函数中调用它
你可以把它放在你的函数之上:
export default function useAnalytics() {
d.setMonth(d.getMonth() - 3);
const [isLoading, setIsLoading] = useState(false);
const [dateRange, setDateRange] = useState([d.getTime(), Date.now()]);
const [startDate, endDate] = dateRange;
const { data: sentimentData } = useSWR(
`xx/xx/xxx-xx-xx?startTime=${startDate}&endTime=${endDate}`,
fetchSentiment
);
//...Rest of your function
并将其从您的handleChange
:
const handleChange = e => {
setDateRange(e);
return sentimentData;
};
推荐阅读
- configuration - “ENV_NAME”的标准/规范?
- sql-server - 我无法在远程桌面上访问 SQL Server(SQL 网络接口,错误:26 - 错误定位服务器/指定的实例)
- elasticsearch - 使用 fluentd 将 HTTP 访问日志传递给 Kibana
- python - 更改前缀会使机器人不响应命令 [Discord.py]
- python - Python Pandas 数据框到 PostgreSQL 数据库中的临时表
- python - 多处理:仅使用物理内核和 Python 池
- javascript - 如何根据列值检查表中是否有任何记录?
- c# - ASP.NET MVC 分页错误“PagedListPager”
- javascript - 重放 CSS 动画
- elasticsearch - 你能让 Elasticsearch 7.x 空间查询更精确吗?