reactjs - 使用 next.js 时 typescript 上的错误数据类型

Question

我在了解要从中获取 API 的 URL 的数据类型时遇到问题，并且我正在使用自定义 Hook 来使其可用我正在将 Next.js 与 typescript 结合使用

这是一个useFetch.js(自定义 Hook )

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

type FetchParams = {
  url: any
}

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

export default async function useFetch(url: FetchParams) {
  const [data, setData] = useState("")
  setData(await getData(url))
  return { data };
}

这是一个祈祷组件

import useFetch from '@/Hooks/useFetch';
import { useState, useEffect } from 'react';

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, setData] = useState("")
  
  useEffect(() => {
    const { data }: any = useFetch(`https://api.aladhan.com/v1/calendarByCity?city=${city}&country=${country}&method=5&month=${month}&year=${year}`)
    console.log(data)  
  }, [data])
  
  return()
}

错误是:

Argument of type 'string' is not assignable to parameter of type 'FetchParams'.ts(2345)

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

Answer 1

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

更新 useFetch 以使用 URL 字符串类型值。不要忘记使用 useEffect Hook 来发出获取和更新 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}`
});

useFetch Hook 无法从 useEffect Hook 的回调函数中调用。它必须作为组件或其他自定义 React Hook 的顶层进行调用。删除 data 状态并简单地引用 useFetch Hook 的返回值。

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 (....);
}