Tengo un componente que renderiza otros por switch-case
export default function Fragment(props) { switch (props.type) { case FRAGMENT_TYPES.Start: return StartFragment(props); case FRAGMENT_TYPES.Rules: return RulesFragment(props); // some other cases default: return null; } } Pero obtengo un 'error de orden de Hooks' si StartFragment usa hooks pero RulesFragment no.
¿Cómo puedo evitar este error? ¿Debo subir todos los enlaces en Fragment o hay otro método?
Supongo que llamas a la función directamente.
Fragment(props)en lugar del componente
<Fragment {...props}/> Fragment también llama directamente a StartFragment y RulesFragment . Entonces StartFragment y RulesFragment se ejecutan en el contexto de los componentes de llamada. Por lo tanto, si StartFragment tiene un gancho pero RulesFragment no, es como usar ganchos en condicionales. P.ej
const App = (props) => { const fragment = Fragment(props) .... } La App llama a la función Fragment llama a la función StartFragment .
Pero cuando usas un componente
const App = (props) => { const fragment = <Fragment {...props}/> .... } La App no llama directamente a la función Fragment . Llama a un componente React que tiene una gestión de estado propia y este componente llama a la función Fragment . Puedes verlo cuando miras el código transpilado. Debería verse algo como esto:
React.createElement(Fragment, props, null); Es por eso que <Fragment {...props}> funciona pero Fragment(props) no.
Si este es el caso, recomendaría cambiar la función Fragment a:
function Fragment(props) { switch (props.type) { case "Start": return <StartFragment {...props}/>; case "Rules": return <RulesFragment {...props}/>; // some other cases default: return <></>; } }