reactjs - 无效的挂钩调用。Hooks 只能在函数体内部调用：在函数中使用 useState

Question

每个人。我是 React 和 JavaScript 的新手。

现在我正在开发一个 Web 应用程序。我试图解决这个错误一个星期，我完全迷失了。如果有人有任何建议，请帮助我。

当程序调用“useFetchTechData”函数时，它得到了这个错误。

useFetchTechData 的程序如下：

import { useEffect, useState } from "react";


const useFetchTechData = (TechIndicator, StockSymbol, Interval, TimePeriod, PriceType, API_KEY) => {
    
    let Function_API_Call = `https://www.alphavantage.co/query?function=${TechIndicator}&symbol=${StockSymbol}&interval=${Interval}&time_period=${TimePeriod}&series_type=${PriceType}&apikey=${API_KEY}`
    let technicalChartXValuesFunction = [];
    let technicalChartYValuesFunction = [];
    const [technicalChartXValues, setTechnicalChartXValues] = useState([]);
    const [technicalChartYValues, setTechnicalChartYValues] = useState([]);

    useEffect(() => {
        fetch(Function_API_Call)
        .then(
            function(response) {
                return response.json();
            }
        )
        .then(
            function(data) {
                for(var key in data['Technical Analysis: ' + TechIndicator]) {
                    technicalChartXValuesFunction.push(key);
                    technicalChartYValuesFunction.push(data['Technical Analysis: ' + TechIndicator][key][TechIndicator]);
                }
                
                setTechnicalChartXValues(technicalChartXValuesFunction);
                setTechnicalChartYValues(technicalChartYValuesFunction);
            }
        )
    }, [Function_API_Call]);
    
    console.log(technicalChartXValues, technicalChartYValues)
    return { technicalChartXValues, technicalChartYValues };
}
 
export default useFetchTechData;

调用 useFetchTechData 时的代码如下：

const useTechnicalClick = (e) => {
    e.preventDefault();
    setIsPending(true);
    setAfterInit(true);
    let technicalData = useFetchTechData(TechIndicator, StockSymbol, Interval, TimePeriod, PriceType, API_KEY);
    technicalChartXValues = technicalData[0];
    technicalChartYValues = technicalData[1];
}

错误如下：