Javascript 变量在Fetch中更改，但在函数外部保持不变

我有一个React应用程序和一个应用程序容器，我想在其中调用一个fetch来获取一些数据，以便传递给需要这些信息的组件

我在onload函数（我的fetch所在的位置）之外声明了变量，并在fetch中为它们分配了不同的值。这些变量将在获取中更改，但在获取之外保持不变

为什么他们没有保持不变？有没有办法解决这个问题

我试着改变用var而不是let声明的变量，并且试着把函数放在const中

我还尝试将fetch放在其他组件中（如下图所示），但是我必须声明两个状态并调用fetch with int a fetch，因为我已经在那里调用了另一个fetch，这变得很麻烦

let latestRelease = 0;
let draftRelease = 0;
let doClone = false;

function onload() {

  fetch(url, {
    method: 'GET'
  })
    .then(function(response) {
      return response.json();
    })
    .then(function(result) {
      for(var i = 0; i < result.length; i++)
      {
        if(result[i].id > latestRelease && result[i].status === "released") {
          latestRelease = result[i].id;
        }

        if(result[i].id > draftRelease && result[i].status === "draft") {
          draftRelease = result[i].id;
        }
      }

      if(latestRelease > draftRelease) {
        doClone = true;
      }
    })
    .catch((error) => {
      console.log(error);
    });
}

const App: React.FC = () => {
onload()
  return (
    <React.Fragment>
      <CssBaseline />
      <Container fixed>
        <PersistentDrawerLeft/>
        {console.log(latestRelease)} //displays 0
                <Title/>
          <Table />
      </Container>
    </React.Fragment>
  );
}

export default App;

let latestRelease=0；
让draftRelease=0；
让doClone=false；
函数onload（）{
获取（url{
方法：“获取”
})
.然后（功能（响应）{
返回response.json（）；
})
.然后（函数（结果）{
对于（变量i=0；ilatestRelease&&result[i].status==“已发布”）{
latestRelease=结果[i].id；
}
if（结果[i].id>draftRelease&&result[i].status==“草稿”）{
draftRelease=结果[i].id；
}
}
如果（最新租约>草稿发布）{
doClone=true；
}
})
.catch（（错误）=>{
console.log（错误）；
});
}
常量应用程序：React.FC=（）=>{
onload（）
返回(
{console.log（latestRelease）}//显示0
);
}
导出默认应用程序；

我期望latestRelease和draftRelease不会保持为0，但任何大于0的值，但输出仅为0。返回正确的值后，我希望将它们作为道具传递给组件

---

非常感谢

请尝试使用状态变量，因为如果状态变量更改，渲染将再次调用，在这里，使用普通变量可能是它的更改，但不是渲染

---

谢谢。

部分问题在于，您似乎没有正确区分同步代码和异步代码

fetch

是异步的，这意味着不能保证该代码在文件中任何其他内容之前运行。（

fetch

使用JS承诺来管理异步数据，因此它有助于更好地掌握异步数据。）

在典型的React案例中，您需要做一些不同的事情。首先，您希望使用组件状态来保存数据，而不仅仅是随机变量（这允许在这些值更改时React重新渲染）。其次，当您异步获取数据时，您需要在获取完成之前确定应用程序应该做什么

下面是一个非常基本的示例，说明了这是如何工作的：

import React，{useState，useffect}来自“React”
常量应用=（{url}）=>{
//我们将使用此变量存储包含详细信息的对象
常量[releaseDetails，setReleaseDetails]=useState（null）
//加载组件后，我们将获取url（来自组件道具），然后
//运行你的逻辑。
useffect（（）=>{
设latestRelease=0；
让draftRelease=0；
让doClone=false；
获取（url）
.then（（response）=>response.json（））
。然后（（结果）=>{
对于（变量i=0；ilatestRelease&&result[i].status==“已发布”）{
latestRelease=结果[i].id；
}
if（结果[i].id>draftRelease&&result[i].status==“草稿”）{
draftRelease=结果[i].id；
}
}
如果（最新租约>草稿发布）{
doClone=true；
}
//为了使这些细节对组件可用，我们将它们绑定到一个对象中
//并更新组件的状态：
setReleaseDetails({
最近，
放风，
码头工人
})
})
.catch（（错误）=>{
//理想情况下，您希望在这里进行适当的错误处理
console.log（错误）
});
}，[]）//传递一个空数组，以便仅在第一次呈现组件时运行此操作
//因为我们是异步获取数据的，所以我们需要在等待时显示一些内容
if（releaseDetails==null）{
返回“正在加载…”
}
//一旦数据可用，您就可以在渲染时使用详细信息
//渲染子组件并将值作为道具传递给它。
返回(
`LatestRelease:${releaseDetails.LatestRelease}`
)
}

---

一般来说，可能有一些React和通用JS概念需要您确认，尤其是在状态和异步数据获取方面。不确定到目前为止你对它有多少经验，但你可能想看看一些介绍教程（可能像这样）查看您可以了解多少内容，以及是否有任何内容需要您进一步熟悉。

变量应处于重新渲染状态

您的

onload

函数叫什么？@ZaidCrouch啊！到目前为止还没有，但是如果我在return（）之前调用它，它不会改变console.log（latestRelease）hind NAVEEN的输出，你是说这个吗？我不想显示从提取中获取的详细信息，所以我仍然需要状态变量吗？是的，myrmidon999，状态变量具有这样的功能：当您更改状态变量时，它会自动调用函数中的返回组件或调用中的呈现组件。谢谢您的回答，Zaid！不幸的是，我只是在没有完全理解它们是如何工作的情况下，就不得不动态地学习和使用它们。即使我不想显示我正在获取的数据，我仍然必须将它们存储在一个状态中，如果它们发生变化，我会做出反应