Question

操作系统：Windows 10 Pro。
下一页：8.1.0。
Express服务器：4.16.4。

因此，我试图从自定义快递服务器访问ctx.req属性，以获取对req.ip的访问权限，我使用了React上下文在站点周围使用它，但是却获得了{{1 }}值响应。我该如何解决？

我的代码如下：

Usercontext.js

undefined

_app.js

import { createContext } from 'react';

const UserContext = createContext();

export default UserContext;

然后按如下所示访问每个必需组件中的值：

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    // this exposes the query to the user
    pageProps.query = ctx.query;
    pageProps.req = ctx.req; // This line causes the site to break
    return { pageProps };
  }
  render() {
    const { Component, apollo, pageProps } = this.props;

    return (
      <Container>
        <ApolloProvider client={apollo}>
          <UserContext.Provider value={{ userip: pageProps.req }}>
            <Page>
              <Component {...pageProps} />
            </Page>
          </UserContext.Provider>
        </ApolloProvider>
      </Container>
    );
  }
}

我最初尝试在const somePageComponent = props => { const { userip } = useContext(UserContext); }中进行pageProps.req = ctx.req，但这导致_app.js发生

Server.js

Error: Circular structure in "getInitialProps" result of page "/_error"

Answer 1

您应该应该只从req中获取所需的内容，而不是获取整个对象，这就会给您带来错误。

例如，如果您尝试从自定义标头中获取用户的IP地址，则应执行以下操作：

pageProps.userip = ctx.req.headers['x-userip']

...然后：

<UserContext.Provider value={{ userip: pageProps.userip }}>

我希望这会有所帮助。

Answer 2

                    <div
                    class="container-fluid px-0">
                    <!-- row start -->
                    <div class="row no-gutters align-items-center h-full">
                        <div class="col-lg-3 offset-lg-2 col-md-8 offset-md-2 col-sm-10 offset-sm-1 sm:px-20 z-2">
                            <div class="masthead__content">


                                <div data-split="lines" data-split-page-reveal class="mr-minus-lg md:mr-0">
                                    <h1 class="masthead__title fw-700 text-white js-title">
                                        Title
                                    </h1>
                                </div>

                                <div data-split="lines" data-split-page-reveal>
                                    <p class="masthead__text text-light mt-40 md:mt-20 js-text">
                                        Subtitle
                                    </p>
                                </div>
                                <div data-split="lines" data-split-page-reveal>
                                    <p class="masthead__text text-light mt-40 md:mt-20 js-text">
                                        <button class="learn-more">
                                            <span class="circle" aria-hidden="true">
                                                <span class="icon arrow "></span>
                                            </span>

                                            <span class="button-text">Learn More</span>
                                        </button>
                                    </p>
                                </div>

                            </div>
                        </div>

                        <div class="col-xl-5 offset-xl-1 col-lg-6 offset-lg-1 z-1">
                            <div data-parallax="0.7" class="masthead__img overflow-hidden h-100vh ml-minus-sm md:ml-0">
                                <div data-parallax-target class="bg-image js-lazy js-image" data-bg="img/index/light.jpg"></div>
                                <div class="masthead__img__cover js-image-cover"></div>
                            </div>
                        </div>
                    </div>
                    <!-- row end -->
                </div>

如何：从_app.js中的快递服务器获取req.ip？

2 个答案: