日历函数调用不起作用无效的挂钩调用

Question

我在尝试将函数传递到日历组件时收到一条错误消息 - 不知道我打算如何调用这个特定的函数来更改正在获取的数据？

这是日历组件，

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
    />
  );
};

这是具有我想要处理更改功能的文件，

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)

Answer 1

useSWR是一个钩子，而你should not call it inside a function

你可以把它放在你的函数之上：

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