我建立了一个简单的项目来提高我在react框架中的技能，我的项目，它从API中获取一些数据，称为Bored API，它提供了一些不同类别的活动，如烹饪或DIY等，并使用翻译器API将活动翻译为阿拉伯语。我的问题是我做了两个hooks，第一个是useBored，它获取该活动并将其发送到称为useTranslate的第二个hook，该useTranslate将文本发送到翻译器API以便更好地理解，以下是代码：
App.tsx：

import React, { useEffect, useState } from "react";
import CardComp from "./components/CardComp";
import images no need to copy it here
const App: React.FC = () => {
  const [final, setfinalD] = useState<string>(""); //this state used after I get the final text from translator 
  useEffect(() => {
    console.log(final); 
  }, [final]);

  return (
    <div className=" bg-gradient-to-bl from-gray-700 via-gray-900 to-black flex justify-center items-center h-[100vh] w-[100vw]">
      <div className="grid gap-2 grid-cols-2 grid-rows-3 ">
        <CardComp
          placeholder="تــعـلـوم"
          image={education}
          setD={setfinalD}
          type={"education"}
        />
        <CardComp
          placeholder="نـشـاطـات"
          image={kite}
          setD={setfinalD}
          type={"recreational"}
        />
        <CardComp
          placeholder="أجتـماعـيات"
          image={social}
          setD={setfinalD}
          type={"social"}
        />
        <CardComp
          placeholder="أفعلها بـنـفسك"
          image={diy}
          setD={setfinalD}
          type={"diy"}
        />
        <CardComp
          placeholder="عمل خــيـر"
          image={social}
          setD={setfinalD}
          type={"charity"}
        />
        <CardComp
          placeholder="طـبخ"
          image={cooking}
          setD={setfinalD}
          type={"cooking"}
        />
        <CardComp
          placeholder="أسـترخاء"
          image={education}
          setD={setfinalD}
          type={"relaxation"}
        />
        <CardComp
          placeholder="عــمــل"
          image={work}
          setD={setfinalD}
          type={"busywork"}
        />
      </div>
      {final ? <p>{final}</p> : null} // here print the translated text
    </div>
  );
};

export default App;

现在CardComp.tsx：

import React from "react";
import { useBored } from "../hooks/useBored";
import { useTranslate } from "../hooks/useTranslate";

interface ICard {
  placeholder: string;
  image: string;
  type: string;
  setD: React.Dispatch<React.SetStateAction<string>>; 
}

const CardComp: React.FC<ICard> = ({ placeholder, image, type, setD }) => {
  const getTheData = () => { // *ERROR* came from here
    const { data: dd } = useBored(type);
    const { data, isLoading, error } = useTranslate(dd[0]);
    if (isLoading === false) {
      setD(data);
    }
  };
  return (
    <div>
      <div
        onClick={getTheData}
        className="flex flex-col justify-center items-center p-7 cursor-pointer  font-mono bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-700 via-blue-800 to-gray-900"
      >
        <div className=" ">
          <img src={image} className="w-[2.3em]" />
        </div>
        <h3>{placeholder}</h3>
      </div>
    </div>
  );
};

export default CardComp;

现在useBored.ts：

import { useState, useEffect } from "react";

export const useBored = (type: string) => {
  const [data, setData] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string>("");

  useEffect(() => {
    fetch(`http://www.boredapi.com/api/activity?type=${type}`)
      .then((r) => r.json())
      .then((r) => (setIsLoading(false), setData([r.activity, r.link])))
      .catch((e) => setError(e));
  }, [type]);
  console.log(data);
  return { data };
};

最后一个钩子是useTranslate.ts：

import { useState, useEffect } from "react";

export const useTranslate = (text: string) => {
  const [data, setData] = useState<null | string>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string>("");

  useEffect(() => {
    fetch(`https://api.mymemory.translated.net/get?q=${text}&langpair=en|ar`)
      .then((r) => r.json())
      .then((r) => (setIsLoading(false), setData(r.matches[0].translation)))
      .catch((e) => setError(e));
  }, [text]);
  return { data, isLoading, error };
};

如您所见，这是我的项目，错误来自CardComp中的getTheData函数，如果在函数之外使用hooks，它会工作，但不是我想要的，* 错误 * 是：

请告诉我出了什么事，谢谢。
我用顺风做造型。