未捕获（承诺）类型错误：无法读取未定义的属性“标题”

【问题标题】：Uncaught (in promise) TypeError: Cannot read property 'headers' of undefined未捕获（承诺）类型错误：无法读取未定义的属性“标题”
【发布时间】：2019-05-16 18:24:58
【问题描述】：

所以，我试图在我的应用程序中传递用户的 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 中的标头获取 ip 地址？

【问题讨论】：

标签： reactjs next.js

【解决方案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

我希望这会有所帮助。

【讨论】：