0
388
VistasMaterial-UI Select muestra el valor incorrecto: más explicación en la publicación
Tengo estas opciones donde el usuario puede elegir Taza, Tazón y Estuche. El problema aquí es que si elijo Taza, el valor muestra "Taza". Y si elijo "Taza", mostrará "Estuche". ¿Qué hay de malo con los códigos aquí?
import React, { useState } from "react"; import Box from "@mui/material/Box"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; import Select from "@mui/material/Select"; export default function BasicSelect() { const [prod, setProd] = useState(""); const [qty, setQty] = useState(0); const [color, setColor] = useState(""); const [age, setAge] = useState(""); const handleChange = (event) => { setProd(event.target.value); console.log(prod); }; return ( <Box sx={{ minWidth: 120 }}> <FormControl fullWidth> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" value={prod} label="Age" onChange={handleChange} > <MenuItem value="Cup">Cup</MenuItem> <MenuItem value="Mug">Mug</MenuItem> <MenuItem value="Case">Case</MenuItem> </Select> </FormControl> </Box> ); }Enlace de codesandbox: https://codesandbox.io/s/basicselect-material-demo-forked-4g34r?file=/demo.js:0-1094
2 Respuestas
Responde la pregunta0
Si echas un vistazo a tu hanldeChange
const handleChange = (event) => { setProd(event.target.value); console.log(prod); }; En consol.log(prod) prod es la variable que será event.target.value . Lo que realmente está viendo en la consola de salida es el estado anterior, porque setProd no ha vuelto a representar la interfaz de usuario a tiempo para que el prod contenga el event.target.value que ha seleccionado en la interfaz de usuario.
Si desea ver en la consola de salida qué valor ha seleccionado en el menú desplegable, use console.log como este console.log(event.target.value)
Puede consultar aquí para obtener más información sobre el ciclo de vida de setState https://reactjs.org/docs/state-and-lifecycle.html
0
No hay nada de malo en tu código, solo estás usando console.log en el lugar equivocado .
Cuando se invocan oyentes como la función onChange , React controla su invocación de alguna manera. Cada evento DOM en React está envuelto en una función personalizada que hace posible, entre otras cosas, usar setState dentro del oyente.
En su caso, cuando se invoca setProd , se programará una tarea de sincronización . El propósito de esta tarea es sincronizar el árbol de fibra, lo que implica averiguar qué ha cambiado y confirmar los nuevos cambios para que los resultados se puedan ver en el navegador.
Esta tarea de sincronización que mencioné anteriormente comenzará a ejecutarse después de que el oyente haya terminado de ejecutarse; por lo tanto, iniciar sesión en la consola después de llamar a setProd utilizará el valor anterior , no el que se acaba de proporcionar a setProd .
Para configurar eso, puede agregar otro console.log que imprimirá el valor que probablemente esperaría:
console.warn("REAL VALUE: ", prod); const handleChange = (event) => { setProd(event.target.value); console.log(prod); }; Para animar un poco las cosas, puede agregar un debugger; palabra clave en el oyente para que pueda obtener una mejor comprensión de lo que está pasando allí:
En la imagen de arriba, el punto de interrupción se detiene en console.log(prod) . Puede ver en la esquina inferior derecha syncQueue que contiene la tarea responsable de actualizar el árbol de fibra. Se ha agregado allí como resultado del uso de setProd .
También tenga en cuenta que después de que finalice el oyente, se invocará flushSyncCallbackQueue (está en el bloque finally ) y esto conducirá a la ejecución de tareas que están en syncQueue .