无效的钩子调用-我的第一个React函数

Question

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

错误:常量(颜色、改变颜色)= useState ([])

错误:无效钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:.

我错过了什么?

组件代码:…

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)做什么，很难确切地说你需要什么，但它似乎是一个async函数。如果你想在一个变量中使用它的结果，你必须处理这个问题，并等待正确的结果，你可以在你的组件中设置一个属性，通过一个回调函数传递到GetColor