Блог

Главная - Вопросы по программированию - Как обмениваться вложенными файлами контекста — nextjs

Как обмениваться вложенными файлами контекста — nextjs

#javascript #next.js

Вопрос:

Это мои страницы:

 /pages
   /gift
      /[slug]
         index.tsx
   /personalize
      index.tsx

У меня GiftProvider внутри /gift/[slug]/index.tsx :

   return (
    
      <GiftProvider gift={gift}>
         <ProductPage />

пользователь может видеть /personalize/index.tsx внутренний ProductPage компонент с помощью функции:

   const goToPersonalize = () => {
    router.push(`/gift/${gift.id}/personalize`)
  }

          ....

теперь у меня есть gift внутреннее состояние /gift/[slug]/index.tsx . (введите это с SSG)
Как я могу получить доступ к этому внутреннему состоянию personalize ?

Комментарии:

1. Используйте redux и в компоненте персонализация/индекс просто получите подарок, необходимый для персонализации с помощью gift.id .

2. вы можете использовать GiftProvider как внутри _app.js , так и внутри gift/[slug]/index.tsx , просто обновите состояние с помощью gift

Ответ №1:

Я бы отделился GiftProvider от страницы и предоставил пользовательский крючок для обновления/чтения состояния.

Экс. ./components/giftProvider 

 const GiftContext= React.createContext(null)

export function GiftProvider ({ children }) {
    const [gift,setGift] = useState(null)
    
    return (
        <GiftContext.Provider  value={{gift,setGift}} >
            {children}
        </GiftContext.Provider>
    )
}

export function useGift() {
    const value = useContext(AuthContext)
    return value
}

Теперь заверните каждую страницу внутрь GiftProvider :

_app.js 

 import { GiftProvider } from './components/giftProvider'
function MyApp({ Component, pageProps }) {
    return (
        <GiftProvider>
            <Component {...pageProps} />
        </GiftProvider>
    )
}

export default MyApp

Затем вы можете установить подарок, используя свой собственный крючок, где вам нужно :

 import {useGift} from '../../components/giftProvider '

    ....
    
        const {gift,setGift} = useGift()
        let mygift = "something" // the gift object
        setGift(mygift )
        
    ....

Таким же образом вы можете получить текущий подарок (например, внутри /personalize/index.tsx ):

 import {useGift} from '../../components/giftProvider '

....

    const {gift} = useGift()
    
....

Если вы хотите сохранить свое состояние (например, сохранить подарок в локальном хранилище), вы можете изменить setGift функцию хранения данных и добавить useEffect внутри giftProvider , чтобы определить, сохранен ли уже подарок.
Что-то вроде этого :

  export function GiftProvider ({ children }) {
        const [gift,setGift] = useState(null)
        useEffect(()=>{
            let storedGift = localStorage.getItem('gift') ? localStorage.getItem('gift') : {} ;
            setGift(JSON.parse(storedGift)
        },[])
        
        const setNewGift = (giftObject) => {
            localStorage.setItem('gift', JSON.stringify(giftObject));
            setGift(giftObject)
        }
        
        return (
            <GiftContext.Provider  value={{gift,setGift,setNewGift}} >
                {children}
            </GiftContext.Provider>
        )
    }
Метки: