如何实现 API 调用服务器并在单击按钮时显示数据（React、Node、Express）

Question

编辑：我已经调试并提供了以下一些问题的答案。

我已经研究这个问题一段时间了，但似乎找不到合适的解决方案。正如您将在查看我的代码时看到的那样，我有很多东西要学。尽管我放置了多余的 await，但问题似乎来自于尝试显示尚未完成获取的数据。我也很好奇是否应该将 getData() 函数放在 useEffect 挂钩中？问题是我在提交按钮的 onClick 中使用了 getData() 函数。因此，当我运行我的应用程序时，getData() 仅在 useEffect 的范围内可用。

  const getData = async () => {
    if(searchData.platform !== "" && searchData.platformUserIdentifier !== ""){
      setValidInput(true);
      const response = await fetch(`http://localhost:8080/data?platform=${searchData.platform}&username=${searchData.platformUserIdentifier}`);
      const json = await response.json();
      await finishAllOperations(json)
    } else {
      setValidInput(false);
    }
  }
  
  function finishAllOperations(json) {
  if(json.code === "ERR_BAD_REQUEST"){
    console.log(`Request failed with a status code ${json.status}`);
    setErrorMessage(true);
    setDisplayTable(false);
  } else {
    console.log("Request successful");
    setMatches(json);
    setErrorMessage(false);
    setDisplayTable(true)
  }
}

const displayMatchRows = matches.map((match,index) => {

  //dummy data to populate if reward is available
  function checkRewardAvailability(match){
    const value = Math.random()
    if (value <= .5) {
      return true
    } else {
      return false
    }
  }

  return (
    <tr key={match.id}>
      <td>{index+1}</td>
      <td>{parseDate(match.metadata.endDate.value)}</td>
      <td>{match.stats.kills.value}</td>
      <td>{match.stats.rankScore.value}</td>
      <td>{checkRewardAvailability()?<button className="reward-button">Claim Reward</button>:""}</td>
    </tr>
  )
})

当我将代码部署到我的节点服务器并尝试使用上述代码提交 API 调用时，我收到以下错误：

TypeError: b.map is not a function

此外，当我运行我的程序与我的客户端和服务器运行在不同的终端上运行时，我的代码可以正常工作并且数据可以正确显示。但是，“请求成功”控制台日志出现在提取完成运行ning 之前。显然，我希望在我完全完成所有数据的获取后出现“请求成功”（见附件截图）。

"Request Success" before fetch finish

我真的很感谢任何意见，因为我差点砸了我的电脑。提前谢谢你。

Answer 1

我很高兴地报告，经过几个小时的调试，错误来自我的 .env 文件，它提供了一个未定义的值，因为它没有与我的 package.json 文件一起移动。

因为 .env 文件在错误的位置，我没有得到 .map 可以处理的数组。当我意识到我收到的错误与服务器的 API 调用有关时，我收到了一个错误

{"code":"ERR_HTTP_INVALID_HEADER_VALUE"}

这对我来说似乎很模糊，花了一些时间才找到。如果您收到此错误并且您正在使用 .env 文件，请检查以确保它没有返回未定义的值。如果未定义，请确保 .env 文件与 package.json 文件位于同一目录中。

如何实现 API 调用服务器并在单击按钮时显示数据（React、Node、Express）

How to implement API call to server and display data on button click (React, Node, Express)

fetch

async-await

reactjs

array.prototype.map

use-effect