reactjs - 未捕获( 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 中的 header 获取 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 可用，无论是服务器还是客户端呈现，那么您将需要找到一种方法在首次加载时存储它，无论是哪个页面可能是。

也许您可以使用上下文来存储它。

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

我希望这会有所帮助。