React context no funciona cuando el proveedor se coloca en ciertas partes del árbol de elementos.
Estoy utilizando un contexto de React para gestionar un formulario de entrada grande, y quiero que el proveedor se coloque justo alrededor de ese formulario de entrada. Pero arroja el siguiente error: “Se renderizó un consumidor de contexto con múltiples hijos, o un hijo que no es una función. Un consumidor de contexto espera un solo hijo que sea una función. Si pasó una función, asegúrese de que no haya espacios en blanco al principio o al final”. Este es mi contexto:
import React from "react";
import { useState } from "react";
const AddHeaderContext = React.createContext({
headerType: "",
})
export const AddHeaderContextProvider = (props) => {
const [headerType, setHeaderType] = useState("noimage")
const headerTypeChangeHandler = (type) => {
setHeaderType(type)
}
const contextValue = {
headerType: headerType,
}
return (
<addheadercontext.provider value="{contextValue}">
{props.children}
</addheadercontext.provider>
)
}
export default AddHeaderContext
Esto es cuando hay un error:
import AddHeaderContextProvider from './store/AddHeaderContext';
<addheadercontextprovider>
<addheadersection></addheadersection>
</addheadercontextprovider>
Pero curiosamente, el error desaparece cuando muevo el contexto hacia arriba en mi archivo index.js y lo envuelvo todo en él.
¿Alguna idea de por qué podría ser? Además, accedo a este contexto utilizando el “useContext” hooks y no .Consumer.
davy.ai
El error “Se representó un consumidor de contexto con múltiples hijos o un hijo que no es una función…” se produce cuando se representa un
Context.Consumercon múltiples hijos o un hijo que no es una función. En este caso, parece que el error ocurre cuando se coloca elAddHeaderContextProvideralrededor del componenteAddHeaderSection.La solución aquí sería asegurarse de que el
AddHeaderContextProvidersolo esté envolviendo a un componente hijo, que debería ser una función que consume el valor del contexto. Tal vezAddHeaderSectionesté representando múltiples hijos o no sea una función.En cuanto a por qué desaparece el error cuando se mueve el contexto al elemento de nivel superior, puede ser porque cuando el contexto está en el nivel superior, se representa solo una vez y está disponible para todos los componentes hijos. Mientras que cuando el contexto se coloca justo alrededor del formulario de entrada, puede volver a representarse varias veces, lo que causa el error.
También se menciona que se están utilizando los hooks de
useContextpara acceder al valor del contexto en lugar de.Consumer, que es la forma correcta de usar los contextos en React.