Почему Context возвращает undefined для родительского компонента, но не его дочерних элементов? - PullRequest
Новая
       33

Почему Context возвращает undefined для родительского компонента, но не его дочерних элементов?

1 голос
/ 03 апреля 2020

Я могу получить значения из контекста в одном компоненте, но не в другом, который является его «родительским». Мой файл контекста: 

import React, { useState } from 'react'
const Context = React.createContext()

const ContextProvider = ({ children }) => {
  const [isConfiguring, setIsConfiguring] = useState(false)
  return (
    <Context.Provider value={{ isConfiguring, setIsConfiguring }}>
      {children}
    </Context.Provider>
  )}

export { Context, ContextProvider }

В компоненте «Форма» я обертываю ContextProvider вокруг «Параметры» 

...
return (
   ...
   <ContextProvider>
       <Options />
   </ContextProvider>
   ...
)

В компоненте «Параметры» я не могу выполнить деструктуру контекста , так как он возвращает 'undefined'. 

const Options = () => {
   const { isConfiguring, setIsConfiguring } = useContext(Context) //undefined
//TypeError: Cannot destructure property 'isConfiguring' of 'Object(...)(...)' as it is undefined.

   const serviceElements = servicesList.map(service =>
         <Service
           name={service.name}
         />)

   return (
      ...
      {serviceElements}
      )
      ...
   )
}

Затем, к моему удивлению, Context работает внутри компонента 'Service' (который находится внутри 'Options') 

const Service = (props) => {
   const { isConfiguring } = useContext(Context) //works!!!
}

Так как я могу go исправить это? В компоненте «Параметры» я попытался сделать это: 

const context = useContext(Context)
  console.log(context) //undefined at first. 
                       //when component renders, it logs '{isConfiguring: false, setIsConfiguring: ƒ}'

//It will log undefined when the component isn't on my screen (rendering). 
//But when I go to the route where the component is at, it logs as 
{isConfiguring: false, setIsConfiguring: ƒ}
//However, doing 
console.log(context.isConfiguring) //TypeError: Cannot read property 'isConfiguring' of undefined 
//even before the component is rendered.
...