Así que soy un principiante en reaccionar, e hice este proyecto MUY simple que toma la edad de alguien a través de la función "prompt ()" en JavaScript y lo pasa a reaccionar para renderizarlo. Puede hacer clic en el botón "Cambiar edad" para cambiar la edad que se muestra en la pantalla, lo que significa que le da otro aviso mediante el cual puede volver a ingresar la edad y la nueva edad se mostrará en la pantalla. Todo funciona bien, pero debido a que React vuelve a mostrar mi página, muestra el aviso varias veces. Si escribe cualquier edad en las indicaciones después de la primera, la edad no cambia en la pantalla. Mi conjetura es que esto probablemente sucede porque el aviso aparece antes de que el dom virtual de react tenga tiempo de conectarse con el dom real, por lo tanto, cualquier valor que ingrese en esos avisos se ignora por completo. Este es probablemente un pequeño problema estúpido que no puedo resolver por mi cuenta, ¡cualquier ayuda es apreciada!
Aquí está App.js:
import {useState} from 'react'; function App() { var ageInput = prompt("What Is Your Age?"); const [age, setAge] = useState(ageInput); const changeAge = () => { setAge(prompt("What Is Your Age?")); } return ( <div className="app"> <h1 style={{textAlign: "center"}}>Homepage</h1> <p>Mario is {age} years old!</p> <button onClick={changeAge}>Change Age</button> </div> ) } export default AppAquí está index.js:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );PD: aún NO conozco Redux, por lo que, lamentablemente, cualquier solución que involucre a Redux está fuera de mi alcance por ahora.
El problema es simplemente que esta línea: var ageInput = prompt("What Is Your Age?"); está en el "nivel superior" de su componente de función y, por lo tanto, se le llama en cada representación. Eso significa que se muestra el mensaje, cuando no desea que lo sea.
El nivel superior de un componente de la función React debe ser una "función pura" que lea los datos que necesita de props/state/etc y devuelva JSX que representa su UI. Las cosas con efectos secundarios, como "prompt", deben llamarse desde otro lugar, ya sea desde un controlador de eventos como su changeAge (esa parte está absolutamente bien en su código), o desde una función pasada al gancho useEffect .
Y useEffect es lo que recomendaría aquí. Parece que solo desea este aviso sin un clic primero para configurar el "estado inicial" de su componente. Así que use useEffect con un segundo parámetro de matriz vacío, para llamar a changeAge también cuando el componente se monte por primera vez, y no después. Su componente terminará luciendo así:
function App() { const [age, setAge] = useState(0); const changeAge = () => { setAge(prompt("What Is Your Age?")); } useEffect(changeAge, []); return ( <div className="app"> <h1 style={{textAlign: "center"}}>Homepage</h1> <p>Mario is {age} years old!</p> <button onClick={changeAge}>Change Age</button> </div> ) } El único pequeño inconveniente de esto es que necesita una "edad inicial" para pasar a useState , que se ejecuta antes que la función useEffect , que por lo tanto se mostrará en su interfaz de usuario inicial antes de que el usuario haya respondido al aviso. He puesto 0 arriba, pero puede poner lo que quiera; probablemente no importe realmente, y si lo hace, puede hacer que la interfaz de usuario muestre algo ligeramente diferente hasta que la age tenga un valor razonable.