Estoy creando una aplicación MERN, quiero permitir que el usuario edite el nombre del alimento en el cuadro de aviso haciendo clic en el botón Edit .
Estaba siguiendo las instrucciones en este enlace: [https://stackoverflow.com/questions/54993218/reactjs-using-alert-to-take-input-from-user]
El problema es que cuando hago clic en el botón Edit y escribo el aviso, luego hago clic en Aceptar , recibirá el valor nulo por primera vez, pero no actualizará la base de datos.
Y luego, cuando hago clic en el botón Edit nuevamente, sin ingresar nada, luego presiono OK , recibirá el valor de la primera vez que lo ingresé y lo actualizará a la base de datos (como un retraso).
Lo que quiero es: cuando haga clic en el botón Edit , mostrará el cuadro de aviso y tomará el valor del cuadro de aviso y actualizará la base de datos cuando el usuario haga clic en Aceptar .
¿Hay alguna manera de que pueda arreglar esto? ¡Gracias a todos!
Aquí está mi demostración: gif
Aquí está mi código:
function FoodListTable(props) { /* Definition of handleClick in component */ const [newFoodName, setNewFoodName] = useState("") const handleEdit = () => { const enteredFood = prompt('Please enter your new food:') setNewFoodName(enteredFood) console.log(newFoodName) if (newFoodName) { Axios.put("https://mern-lefood.herokuapp.com/update", { newFoodName: newFoodName, id: props.val._id }) } } return ( <button onClick={handleEdit}>Edit</button> ) }Reaccione this.setState y useState no realiza cambios directamente en el objeto de estado.
React this.setState y React.useState crean colas para que el núcleo de React actualice el objeto de estado de un componente de React.
Entonces, el proceso para actualizar el estado de React es asíncrono por razones de rendimiento. Es por eso que los cambios no se sienten inmediatos.
¡Prueba el siguiente código que funciona!
function FoodListTable(props) { /* Definition of handleClick in component */ const [newFoodName, setNewFoodName] = useState(""); const handleEdit = () => { const enteredFood = prompt('Please enter your new food:'); setNewFoodName(enteredFood); if (enteredFood) { Axios.put("https://mern-lefood.herokuapp.com/update", { newFoodName: enteredFood, id: props.val._id }) } } return ( <button onClick={handleEdit}>Edit</button> ) }Para más detalle Haga clic aquí