Digamos que me gustaría representar un componente secundario diferente según el botón en el que se haya hecho clic:
import { useState } from 'react'; const Bold = ({ text }) => ( <b>{text}</b> ); const Italic = ({ text }) => ( <i>{text}</i> ); export default function App() { const [Component, setComponent] = useState(); return ( <> <button onClick={() => setComponent(Bold)}> Bold </button> <button onClick={() => setComponent(Italic)} > Italic </button> {Component && ( <Component text="I love 🧀 more than life!" /> )} </> ); }Estaba bastante seguro de que esto funcionaría: configuré mi elemento de estado en la función del componente y lo representé. Pero arroja un error:
Error de tipo no capturado: no se puede desestructurar la propiedad 'texto' de '_ref' porque no está definida.
Verifiqué si funcionaría sin accesorios en los componentes secundarios, pero no, da otro error cuando no hay accesorios:
Advertencia: React.jsx: el tipo no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: . ¿Exportó accidentalmente un literal JSX en lugar de un componente?
No entiendo muy bien por qué sucede, pero encontré una solución. En lugar de establecer el valor de mi estado directamente así:
<button onClick={() => setComponent(Bold)}>Lo estoy configurando a través de una función setter:
<button onClick={() => setComponent(() => Bold)}>Funciona correctamente después de ese cambio, pero ¿alguien puede explicar por qué sucede esto? ¿Tener un componente desempaquetado en algún lugar de la plantilla está causando problemas?
El problema es que setState tiene dos formas.
Uno donde acepta algún objeto y otro que acepta una función que puede funcionar con el estado existente y devuelve el nuevo estado.
Ahora, cuando pasa una referencia de componente, en realidad le está pasando una función, por lo que setState asume que es la segunda forma e intenta ejecutar la función para obtener el estado actualizado.
La solución, como ha descubierto por su cuenta, es usar la segunda forma, pasando una función que, cuando se ejecute, devolverá el componente que desea.