Javascript 在React中使用fetch（）处理承诺？

我正在创建我的第一个MERN堆栈应用程序，并尝试实现一个简单的API，从我的前端组件调用我的express服务器。我让API在后端工作，它通过

fetch（）

正确发送数据，但是我在React组件中解决

fetch（）

的承诺时遇到了问题，调用没有停止触发。我的代码如下所示（假设现在所有API调用都返回一个伪格式，如

{title:'foo'，…}

：

import React，{useState}来自“React”；
导入“core js/stable”；
导入“再生器运行时/运行时”；
const getApiData=async（路由）=>{
试一试{
让apiData=等待取数（路由）；
让apiDataJson=wait apiData.json（）；
返回apiDataJson；
}捕捉（错误）{
抛出新错误（'获取时出错'{
错误：错误
})
}
}
var retrieve_data=async（路由、setterCallback）=>{
等待getApiData（`/api/${route}`）。然后（（data）=>{
console.log（'从API检索的数据'）
setterCallback（{data.title}）
}).catch（（）=>{
setterCallback（错误）
})
}
常量MyComponent=（）=>{
const[innerDiv，setinnerDiv]=useState（0）；
let data=retrieve_data（'myEndpoint'，setinnerDiv）；
返回(
在MyComponent中检索到的数据：
{innerDiv}
);
} 

当我编译上述代码时，组件成功呈现（即

如下所示）：

<div>
    <h1>Data Retrieved in MyComponent:</h1>
    <div>foo</div>
</div>

在MyComponent中检索到的数据：
福

---

然而，then

then

块继续执行（即，

“从API检索的数据”

以每秒数百次的速度记录到控制台，直到我关闭应用程序。在设置组件后，如何停止执行此操作？谢谢！

您需要

使用effect

停止组件重新渲染。尝试类似的操作

constmycomponent=（）=>{
const[innerDiv，setinnerDiv]=useState（0）；
useffect（（）=>{
检索_数据（'myEndpoint'，setinnerDiv）；
}, []);
返回(
在MyComponent中检索到的数据：
{innerDiv}
);
}