变量在 Fetch 中被改变但在函数之外没有改变

Question

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

我在 onload 函数（我的 fetch 所在的位置）之外声明了变量，并在 fetch 中为它们分配了不同的值。它们的变量将在 fetch 中发生变化，但在 fetch 之外它们保持不变。

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

我尝试更改使用 var 而不是 let 声明的变量，并且尝试将函数放在 const 中。

我也尝试将 fetch 放在其他组件中（如下所示的 Table），但是我必须声明两个状态并在 fetch 中调用 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;

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

非常感谢！

Answer 1

你能用状态变量试试吗，因为如果状态变量改变了渲染会再次调用，这里你使用一个普通的变量可能是它的改变但它不渲染。

谢谢。

Answer 2

部分问题在于您似乎没有正确区分同步代码和异步代码。 fetch 是异步的，这意味着不能保证该代码在文件中的任何其他内容之前运行。 （fetch 使用 JS promises 来管理异步数据，所以对 using promises 有一个很好的把握。）

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

这是一个非常基本的示例，展示了它是如何工作的：

import React, { useState, useEffect } from 'react'

const App = ({ url }) => {
  // We'll use this variable to store an object with the details
  const [releaseDetails, setReleaseDetails] = useState(null)

  // When the component is loaded, we'll fetch the url (coming from the component props) and then
  // run your logic.
  useEffect(() => {
    let latestRelease = 0;
    let draftRelease = 0;
    let doClone = false;

    fetch(url)
      .then((response) => response.json())
      .then((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;
        }

        // To make these details available to the component, we'll bundle them into an object
        // and update the component's state:
        setReleaseDetails({
          latestRelease,
          draftRelease,
          doClone
        })
      })
      .catch((error) => {
        // You'd ideally want some proper error handling here
        console.log(error)
      });
  }, []) // pass an empty array so this is only run when the component is first rendered

  // Because we're getting the data asynchronously, we need to display something while we wait
  if(releaseDetails === null) {
    return "loading..."
  }

  // Once the data is available, you can then use the details when rendering. You could instead
  // render a child component and pass the values as props to it.
  return (
    `LatestRelease: ${releaseDetails.latestRelease}`
  )
}

一般来说，您可能需要确保掌握一些 React 和通用 JS 概念，尤其是在状态和异步数据获取方面。不确定到目前为止你有多少经验，但你可能想看看一些介绍性教程（可能像this official one），看看你可以遵循多少，以及是否有任何东西可以作为你的东西跳出来需要熟悉更多。

Answer 3

变量应该处于重新渲染的状态