Question

未捕获（在承诺中）TypeError：无法读取未定义的属性“headers”

2019-05-16

4090

reactjs next.js

因此，我尝试在我的应用中传递用户的 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 地址？

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

希望这对您有所帮助。