Next.js

Question

我在 create-react-app 中编写了类似于以下的代码，我想知道 next.js 的等效代码。下面的代码是我尝试拥有一个可用于所有页面的全局上下文。提供商包装链接。我没有错误。问题出在 about 页面内 console.log(state) returns undefined 当我期望上下文状态时。我该如何解决这个问题？

谢谢。

pages/index.js


import Link from "next/link";
import {Provider} from './Context';





function Index(){


    return(

        <div>
         <Provider>
          <ul>
             <li><Link href="/"><a>Home</a></Link></li>
             <li><Link href="/about"><a>About</a></Link></li>
          </ul>
          </Provider>
        </div>

    )
}

export default Index;

pages/about.js

import { useRouter } from 'next/router';
import {Context} from './Context';
import {useContext} from 'react';



const About= () => {

 const data = useContext(Context);
 console.log(data)

  return (
    <div>


      <p>This is the blog post content.</p>

    </div>
  );
};

export default About;

pages/Context.js

import React, {createContext, useState, useEffect}from 'react';


let Context = createContext();

function Provider(props){

   const initialState = {
        userID: false,
        user:undefined,
        loading: true,
        authenticated:false
    }

    const [state,updateState] = useState(initialState)




  return(

    <Context.Provider value={{
        state:state
    }}>

      {props.children}
    </Context.Provider>

  )

}


const Consumer = Context.Consumer;
export {Provider, Consumer, Context}

Answer 1

您可以将 <Provider> 移动到初始化每个页面的自定义 <App> 组件中。

pages/_app.js

import React from 'react'
import App from 'next/app'
import {Provider} from './Context';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Provider><Component {...pageProps} /></Provider>
  }
}

export default MyApp

更多信息here

Answer 2

想法是您需要在树中的任何位置有一个父 Provider 来使用上下文。在您的情况下，您 Provider 不是 About 组件的父级。您需要将 Provider 移动到 _app.js，例如 this

Next.js - 如何使用 Provider 包装路由并使用 Context with Hooks

Next.js - How do I use Provider to Wrap Routes and use Context with Hooks

javascript

reactjs