Uncaught (in promise) TypeError: Cannot read property 'headers' of undefined

Question

所以，我正尝试在我的应用程序中传递用户的 IP 地址，如下所示：

pages/Item.js

const Item = props => (
  <div>
    <SingleItem id={props.query.id} userIP={props.userIP} />
  </div>
);

Item.getInitialProps = async ({ req }) => {
  const userIP = req.headers['x-real-ip'] || req.connection.remoteAddress
  return { userIP }
}

export default withAmp(Item, { hybrid: true });

但是在导航到该页面时收到上述错误消息（见附图）。但是，如果我随后硬性重新加载页面，则 ip 详细信息会正确显示到页面。

我在这里忽略了什么，是否有更好的方法来实现这一点，例如从 _document.js 中的 headers 获取 IP 地址？

Answer 1

req 只有在服务器上调用 getInitialProps 时才可用。这就是当您在页面上进行刷新时它起作用的原因。

导航到页面时没有服务器呈现，因此将在客户端调用 getInitialProps。因此，req 将是未定义的。

您可以将赋值包装在条件中以检查是否定义了 req 以防止错误：

Item.getInitialProps = async ({ req }) => {
  let userIP
  if (req) {
    userIP = req.headers['x-real-ip'] || req.connection.remoteAddress
  }
  return { userIP }
}

但是，如果您希望 userIP 在每个页面上都可用，无论是服务器还是客户端呈现，那么您需要找到一种方法在第一次加载时存储它，无论哪个页面可能是。

也许您可以使用 context.

来存储它

这里有一个使用上下文的例子： https://github.com/zeit/next.js/tree/master/examples/with-context-api

希望对您有所帮助。

Uncaught (in promise) TypeError: Cannot read property 'headers' of undefined

Uncaught (in promise) TypeError: Cannot read property 'headers' of undefined

reactjs

next.js