Estoy aprendiendo Reaccionar. En el archivo App.js, tengo este componente simple.
const p = document.getElementsByTagName("p")[0]; p.innerHTML = "Created with Javascript"; function App() { return <p>Created with JSX</p>; } export default App;Como esperaba, este es el resultado en mi navegador.
Creado con Javascript
Pero cuando actualizo la página con F5, la página está en blanco y aparece este error en la consola.
>Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML') >at Module../src/App.js (bundle.js:22:13) >at Module.options.factory (bundle.js:41603:31) >at __webpack_require__ (bundle.js:41075:33) >at fn (bundle.js:41274:21) >at Module../src/index.js (bundle.js:84:62) >at Module.options.factory (bundle.js:41603:31) >at __webpack_require__ (bundle.js:41075:33) >at bundle.js:42178:37 >at bundle.js:42180:12¿Por qué está pasando esto? Esperaba el mismo resultado después de actualizar la página con F5.
Esto está sucediendo porque p no está undefined . Mientras no se represente nada en la página document.getElementsByTagName("p")[0]; no podrá seleccionar nada.
Debe esperar hasta que finalice el procesamiento y luego seleccionar el elemento html.
Podría usar un useLayoutEffect para eso, o podría reescribir su código para anticipar el uso de react con una ref de useRef . Pero para eso necesitaremos conocer su caso de uso.