使用 next.js 时Typescript 上的错误数据类型

您已声明useFetch以使用FetchParams类型参数，而不是字符串类型参数.

更新useFetch以使用URL字符串类型值.不要忘记使用useEffect钩子来发出进行获取和更新data状态的副作用.

"use client"
import { useState } from "react";

async function getData(url: string) {
  try {
    const res = await fetch(url);
    return res.json();
  } catch(error) {
    console.log("error", error); 
  }
}

export default async function useFetch(url: string) {
  const [data, setData] = useState("");

  useEffect(() => {
    getData(url).then(setData);
  }, [url]);

  return { data };
}

或者，您可以传递一个对象:

type FetchParams = {
  url: string
}

async function getData(fetchParams: FetchParams){
  try {
    const res = await fetch(fetchParams.toString());
    return res.json();
  } catch(error) {
    console.log("error", error); 
  }
}

export default async function useFetch(fetchParams: FetchParams) {
  const [data, setData] = useState("");

  useEffect(() => {
    getData(url).then(setData);
  }, [fetchParams]);

  return { data };
}

const { data }: any = useFetch({
  url: `https://api.aladhan.com/v1/calendarByCity?city=${city}&country=${country}&method=5&month=${month}&year=${year}`
});

从useEffect挂钩的回调函数中调用useFetch挂钩104.必须将其作为组件或其他自定义Reaction挂钩的顶级调用.删除data状态，只需引用useFetch挂钩的返回值.

export default function Pray() {
  // Date methods
  let date = new Date();
  let month = date.getMonth() + 1;
  let year = date.getFullYear();
  // day equal date - 1
  let day = date.getDate()-1;

  const [country, setCountry] = useState('eg');
  const [city, setCity] = useState('cairo');

  const { data }: any = useFetch(
    `https://api.aladhan.com/v1/calendarByCity?city=${city}&country=${country}&method=5&month=${month}&year=${year}`
  );
  
  return (....);
}