Javascript React-GET API调用中的无限循环以及使用挂钩和useState（）的正确方法

我是React的新手，我正在开发一个应用程序，该应用程序将标准CRUD操作应用到Express.js和MongoDB远程后端

在一个页面中，我需要显示使用Axios对远程服务器进行的GETAPI调用的值。每个对象都是多个字段，公司字段（例如，参展商栏中的值类似于5F280EB605C9B25CFEE285C）对应于另一个集合中另一个对象的\u idMongo对象字段值

我需要在表中恢复原始值，进行另一个API调用，并从具有该_id的对象中获取名称字段（例如公司名称示例字符串）。之后，我需要在表字段中显示它，而不是在_id中显示它

例如，为了更加清楚，item.company字段5f27e8ee4653de50faeb1784将显示为公司名称示例字符串

我还需要对Status列执行相同的操作（但不需要对远程服务器调用GET API），其中我需要根据item.active值（布尔值）显示一个图标

这需要在没有任何按钮的情况下完成，但是当我自动打开页面时

我制作了一个标准的javascript函数来实现这一点，但是我得到了一个无限循环，我想这是因为React每次渲染时都调用该函数

进行此操作的正确方法是什么

下面是循环后控制台的错误

js:178 GET net:：ERR\u资源不足

import React，{useState，useffect，useCallback}来自“React”
从“react bootstrap”导入{Tab，Tabs，Col，Form，Button}
从'react icons/fi'导入{FiTrash、FiCloud、FiPhoneCall、FiUserCheck、FiUserX、FiEye}
从“axios”导入axios
const EventProfile=（道具）=>{
//这里有一些代码//
//从DB获得支持
常量[allStands，viewStands]=useState（[{}]）；
useffect（（）=>{
const id=props.match.params.id
常量fetchStands=async（）=>{
const response=等待axios.get(`http://myserver.com/stands/${id}`）；
观景台（响应数据）；
}
fetchStands（）；
}, [])
//使用另一个集合中的公司ID恢复名称
const[companyNameGetted，getCompanyName]=useState（{}）
const getCompanyFromId=useCallback（（道具）=>{
const id=道具；
const getCompany=async（）=>{
const response=等待axios.get(`http://myserver.com/companies/${id}`）；
getCompanyName（response.data）；
}
getCompany（[]）；
}, [])
//根据对象活动字段显示图标
const handleStandStatus=（状态）=>{
如果（状态===真）{
返回；
}否则{
返回；
}
}
//这里还有其他代码//
返回(
//这里有一些代码//
地位
名称
参展商
大小
调色板
{allStands.map（（项目，索引）=>{
返回(
{handleStandStatus（item.active）}
{item.name}
{getCompanyFromId（item.company）}{companyNameGetted.name}
{item.size}
{item.colorplate}
)
})}
//这里还有其他代码//
)
}
导出默认事件配置文件

这部分可能是无限循环的原因：

<td>{getCompanyFromId(item.company)}<Link to={`/companyProfile/${item.company}`}><span>{companyNameGetted.name}</span></Link></td>

因此，它将反映

allStands

状态更改

编辑：这里有一个例子来进一步说明我的意思

const EventProfile=props=>{
//通常，您希望将变量命名为：
//第一个名词/宾语（代表）
//第二个设置器的设置器，因为它是设置“支架”的函数`
const[stands，setStands]=useState（[]）；
const[companys，setcompanys]=useState（{}）；
//在组件加载时仅触发一次的常用效果
useffect（（）=>{
常量fetchStands=async（）=>{
const response=await axios.get（“此处的网址”）；
设置标准（响应数据）；
};
fetchStands（）；
}, []);
//另一个useEffect，当给定的依赖项数组发生更改时会触发，即'stands'变量。因此，每当'stands'状态更改时，它将获取公司名称。
useffect（（）=>{
const fetchCompanies=async（）=>{
const newCompanies={……公司}；
//等待检索到所有公司名称
等待承诺。所有（站起来）forEach（s=>{
const id=s.company；
const response=wait axios.get（“此处的公司url带有“+id”）；
newCompanies[id]=response.data；
}));
公司（新公司）；
};
获取公司（）；
}[看台]；
返回(
//…一些组件
{stands.map（（项目，索引）=>(
{公司[项目公司]}
)}
);
}

您的意思是在同一个useEffect中获取公司名称，进行2次api调用而不是1次api调用吗？抱歉，我想我不明白您的答案，您能给我演示一下使用代码吗？我尝试了好几次，但没有结果。您好，很抱歉回复太晚。我添加了一些示例，希望它能帮助您，并适合您的需要：）>您的意思是在同一个useffect中获取公司名称，进行2个api调用而不是1个api调用吗？我也能做到这一点

<td>{getCompanyFromId(item.company)}<Link to={`/companyProfile/${item.company}`}><span>{companyNameGetted.name}</span></Link></td>

useEffect(() => {get all company from allStands}, [allStands]);