Javascript React 应用程序“fetch”在从浏览器重新加载时返回“未定义”，但在从 API 重新加载时返回数据

Question

我有一个从 github 提取 json 对象的组件

async function getQueryJson(URL)
{
 await fetch(URL) // This gets the git commits
.then( (res) => res.json()) //Converts it to a JSON
.then(
(result) => {
  setCommits(result) // This puts the JSON containing the commits made to gitlocale into state
  console.log("Outputting value of GQJ")
  console.log(commits)
},
(error) => {console.log("Error in fetch: "+error)}
)
}`

在我的 React 代码的 UseEffect 部分中调用它，以使用 JSON 对象数组填充 State。

useEffect(() =>
     {
    var userObject = {}
    getQueryJson(githubCommits)

我的问题是，当我第一次刷新页面时，“提交”返回为“未定义” - 如果我在重新加载页面的 IDE 中更改代码，“提交”会返回一个 JSON 数组，并且代码会正确执行.

让事情变得更复杂的是，如果我将 (res.json()) 输出到控制台，无论我的状态是否设置为未定义，我在所有情况下都会收到 JSON 对象，这让我对执行感到紧张。

我是否正确使用了异步获取功能？
我认为我不需要执行两次。它有 json 对象，但第一次访问时它不会处理 json。

我删除了异步/等待部分，这并不影响功能。 我已将结果移至另一个状态，该状态接收相同的 undefined/json 对象，因此它不会被意外初始化多次 我尝试独立于 fetch 来提取 JSON，但没有成功。

Answer 1

您正在尝试在设置后立即

console.log(commits)

。与常规变量不同，状态不会立即设置。如果您想在提交状态实际发生变化时对其进行操作，最好使用像

useEffect

这样的钩子在设置

commits

时触发。

// Ex:
useEffect (() => {
  // your code
}, [commits]);