No puedo entender por qué mi uso de createContext y useContext no funciona en mi aplicación React.
Tengo mi archivo de contexto así:
// @flow import { createContext, useContext } from "react"; export type CountryIndexProviderType = { index: number, }; const CountryContext = createContext<CountryIndexProviderType>({ index: 0, }); type CountryContextProviderProps = { children: Node, index: number, }; const CountryContextProvider = ({ children, index, }: CountryContextProviderProps) => { return ( <CountryContext.Provider value={{ index }}> {children} </CountryContext.Provider> ); }; const useCountryIndexContext = () => useContext(CountryContext); export { CountryContext, CountryContextProvider, useCountryIndexContext }; Y mi componente donde estoy usando Provider para establecer el valor del index (número):
import { CountryContextProvider } from "/EnteredCountriesContext"; return ( {objects.map((index) => ( <StyledWrappingContainer> <StyledProgress>{index + 2}</StyledProgress> <CountryContextProvider index={index}> // NOT SURE WHAT SHOULD BE HERE? </CountryContextProvider> </StyledWrappingContainer> ))} ); Y mi segundo componente, donde estoy usando useContext para pasar el valor del index a un componente con estilo y representar el valor:
import { useCountryIndexContext } from "/EnteredCountriesContext"; const { index } = useCountryIndexContext(); <StyledWrappingContainer> <StyledProgress> <StyledProgress>{index + 2}</StyledProgress> </StyledProgress> </StyledWrappingContainer> El segundo componente siempre representa el valor de índice predeterminado de 2 (índice predeterminado = 0 + 2 agregados en el procesamiento). ¿Alguien puede sugerir por qué mi valor index no se actualiza?
Puede acceder a los valores desde el contexto después de envolverlos dentro del Proveedor.
Aquí:
return <CountryContext.Provider value={{ index }}></CountryContext.Provider>;El proveedor no tiene hijos, por lo que el índice nunca se transfiere a otro componente.
Te sugiero que uses accesorios para children .
const CountryContextProvider = ({ index,children }: CountryContextProviderProps) => { return <CountryContext.Provider value={{ index }}>{children}</CountryContext.Provider>; }; Finalmente, pase cualquier componente que desee usar index from context, como elementos secundarios de CountryContextProvider :
import { CountryContextProvider } from "/EnteredCountriesContext"; return ( {objects.map((index) => ( <StyledWrappingContainer> <StyledProgress>{index + 2}</StyledProgress> <CountryContextProvider index={index}> <YourSecondComponent /> /// can have any props it needs, not necessary. </CountryContextProvider> </StyledWrappingContainer> ))} ); Ahora YourSecondComponent , donde recibe index.
import { useCountryIndexContext } from "/EnteredCountriesContext"; const { index } = useCountryIndexContext(); <StyledWrappingContainer> <StyledProgress> <StyledProgress>{index + 2}</StyledProgress> </StyledProgress> </StyledWrappingContainer>