无效的 Hook 调用——我的第一个 React 函数

Question

可能是新手错误或误用，但我们开始吧。

错误：const [color, setColor] = useState([])

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一：。

我错过了什么？

组件代码： ...

        this.state = {
            nbrrecs:'',
            pageOfItems: [],
            pageSize: 5,
            fcolor:''
        };

        this.setState({fcolor:GetColor(127,90)});
render(){
return(
                 <h2 className="text-center">{this.fcolor}</h2>
           <td style={{color: GetColor(127,90)}} >{GetColor(127,90)} </td>

...

GetColor.js ...

import { useEffect, useState } from "react";
import SiteReportCardMasterService from '../Services/SiteReportCardMasterService';

    const GetColor = (id,rptvalue) =>
    {
        const [color, setColor] = useState([])
        useEffect(() =>{
        SiteReportCardMasterService.getSiteReportCardMasterById(id).then( (res) =>{
            if (rptvalue === 0) setColor(res.data.sitereportcardmasterColore)
            if (rptvalue < 70) setColor(res.data.sitereportcardmasterColord)
            if (rptvalue >= 70 && rptvalue <80) setColor(res.data.sitereportcardmasterColorc)
            if (rptvalue >= 80 && rptvalue <90) setColor(res.data.sitereportcardmasterColorb)
            if (rptvalue >= 90) setColor(res.data.sitereportcardmasterColora)
            })
        })
        return color
    };
    export default GetColor;

...

Answer 1

GetColor 不返回任何内容。

您确实调用了 return，但它位于内部箭头函数 ((res) =>{...return}) 内，并且该返回仅适用于该函数。

此外，您的变量 color 是在内部函数的范围内定义的，因此无法在外部访问。

如果不知道SiteReportCardMasterService.getSiteReportCardMasterById(id) 的作用，很难准确地说出你需要什么，但它似乎是一个异步函数。如果你想在一个变量中使用它的结果，你必须处理这个并正确等待结果，你可以在你的组件中设置一个属性，并使用一个回调函数传递给GetColor