如何使用上下文api在next js中从布局传递一个prop给子节点

Question

我有使用上下文api在我的应用程序布局全局传递状态的问题。我有这个Layout组件

import { useState, useEffect,createContext } from 'react'
import useAPIStore from "../store/store";
import React from 'react';
export const userContext = createContext();  
const Layout = ({ children }: Props) => {
const [selected, setSelected] = useState(countries[0]);
console.log("The country idsz ...........",selected.id)
const country= selected.id
return (
<>
<LayoutContent sidebar={open} countriesWithsrc ={countriesWithsrc}  selected={selected} lected={setSelected} >
<userContext.Provider value={country}>
{children}
</userContext.Provider>
</LayoutContent>
</>
)
}
export default Layout;

我正在使用上下文提供程序将国家值传递给布局的子元素。下面是我在子组件

中访问它的方式

import React ,{useContext} from 'react'
import Layout from '../components/layout'
import { userContext } from '../components/layout'
const ComingSoonCarbon = () => {
const value = useContext(userContext)
console.log("mamamamia",value)
return (
<Layout>
<div className="flex justify-center font-bold mt-80 text-xl text-[rgb(245,132,38,0.93)]">
<h1>{value}</h1>
</div>
</Layout>
)
}
export default ComingSoonCarbon

我得到一个未定义的值从值，可能是什么问题?谁来帮帮我。我卡住了。

Answer 1

export const userContext = createContext({country: "Sudan"})

如果你想让所有组件都能访问上下文提供程序，你需要把COntext从组件目录中移出。

Answer 2

对于react函数组件，函数名必须使用UpperCamelCase。

将userContext重命名为UserContext。

import { useState, useEffect,createContext } from 'react'
import useAPIStore from "../store/store";
import React from 'react';
export const UserContext = createContext("");  
const Layout = ({ children }: Props) => {
const [selected, setSelected] = useState(countries[0]);
console.log("The country idsz ...........",selected.id)
const country= selected.id
return (
<>
<LayoutContent sidebar={open} countriesWithsrc ={countriesWithsrc}  selected={selected} lected={setSelected} >
<UserContext.Provider value={country}>
{children}
</UserContext.Provider>
</LayoutContent>
</>
)
}
export default Layout;