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

Question

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

pages / Item.js

- BLAKE2b (or just BLAKE2) is optimized for 64-bit platforms—including NEON-enabled ARMs—and produces digests of any size between 1 and 64 bytes
- BLAKE2s is optimized for 8- to 32-bit platforms and produces digests of any size between 1 and 32 bytes

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

我在这里忽略了什么？有没有更好的方法来实现此目的，例如从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地址？

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

我希望这会有所帮助。