无法加载资源：部署到 vercel next js 时服务器响应状态为 500 ()

Question

我正在使用 next js 并添加getServerSideProps到我的项目中，当我将项目重新部署到 vercel 时，我收到了流动错误，但我的本地主机运行得很好

我正在使用 next js 并添加getServerSideProps到我的项目中，当我将项目重新部署到 vercel 时，我收到了流动错误，但我的本地主机运行得很好

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://ask-over.herokuapp.com/questapi`);
  const data = await res.json();
  // console.log(data);
  // Pass data to the page via props
  return { props: { data } };
}

module.exports = {
  reactStrictMode: true,
}

Answer 1

这是由于在使用该变量的下一行代码运行之前异步调用未完成的结果。这可能会随机发生，因为这是异步代码的本质。data.map(...)修复方法是替换您所拥有的行，data ? data.map(...) : [];该行将返回一个空数组，直到数据获取其值，然后地图函数将运行并且您的应用程序应该没问题。

在 javascript 中，几乎任何时候您使用作为等待活动结果的变量时，都应该进行 null 检查。上面的代码检查是否data有值，如果有值，则运行 return data.map，否则返回[]。