出现错误:redux在nextjs中没有页面上下文错误

时间:2019-05-27 09:18:26

标签: reactjs redux react-redux next.js

我是新来的反应者,试图使页面运行,但出现此错误。我不知道是什么原因甚至用Google搜索了许多网站,但没有得到答案。 我的浏览器在_app.js文件中显示错误。

import React from 'react'
import { NextAuth } from 'next-auth/client'
import App, { Container } from 'next/app'
import { resetUniqueIds } from "react-html-id"
// Global CSS from SCSS (compiles to style.css in _document)
import '../styles/globals.scss'

export default class PageApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    pageProps.session = await NextAuth.init({ req: ctx.req })

    return { pageProps }
  }

  componentWillMount() {
    // prevents ID mismatch between server and client
    // @see https://www.npmjs.com/package/react-html-id#does-this-work-with-server-side-rendering
    resetUniqueIds()
  }

  componentDidMount() {
    console.log(this.props.appLog)
  }

  render() {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

这是pages / landing_page.js

import React, { Component, Fragment} from 'react';
import LandingPageContainer from '../containers/LandingPageContainer'
import Layout from '../components/Layout'
import forwardAuth from '../lib/forwardAuth'
const LandingPage = () => {
        return (
            <Fragment>
                <Layout>
                <LandingPageContainer/>
                </Layout>

            </Fragment>
        );
}

export default forwardAuth(LandingPage);

这就是我尝试使用带有forwardAuth和requireAuth的包装组件的方式

forewardAuth:

/**
 * Created by david.vanoni@coplex.com on 11/9/17.
 */

import withRedux from 'next-redux-wrapper'
import { NextAuth } from 'next-auth/client'
import { Router } from '../routes'
import { compose, hoistStatics, lifecycle } from 'recompose'
import { USER_HOME_ROUTE } from '../modules/users'
import initStore from '../store'

const componentDidMount = function () {
  const { session } = this.props

  if (session && session.user) {
    Router.replaceRoute(USER_HOME_ROUTE)
  }
}

const getInitialProps = async function ({ req }) {
  return {
    session: await NextAuth.init({ req })
  }
}

export default compose(
  withRedux(initStore),
  hoistStatics(
    lifecycle({ getInitialProps, componentDidMount })
  )
)

我做错了任何帮助。

0 个答案:

没有答案