Soy un principiante en JSX y necesito usar ciclos de vida para evitar algún error al cargar un editor desde primereact.
Sin embargo, para simplificar este ejemplo, quiero actualizar algunos valores de cadena después de la inicialización y verlos en mi vista.
Este es mi intento:
let displayText = '<div>Hello World!</div>'; useEffect(() => { displayText = '<div>Bye World!</div>; }, []); return (<div>{displayText}</div>)Cuando ejecuto esto, solo veo "¡Hola mundo!". Pero esperaba ver "Bye World", ya que la variable se actualizó. ¿Que pasó aquí? ¿Y cómo puedo lograr esto?
Si desea que una actualización provoque un procesamiento, no puede simplemente asignar una variable. Un render se activa después de un cambio de prop o un cambio de estado. Intenta convertir tu variable a un estado:
const [displayText, setDisplayText] = useState('<div>Hello World!</div>'); useEffect(() => { setDisplayText('<div>Bye World!</div>); }, []); return (<div>{displayText}</div>)De esa manera, después del primer renderizado, el efecto se disparará, el estado cambiará y se renderizará de nuevo con el nuevo valor.
documentación useState : https://reactjs.org/docs/hooks-reference.html#usestate
Además, representará la cadena <div>Hello World!</div> , no un elemento HTML div .