React defaultValue y value juntos en los campos de entrada.
Dado que mi formulario es grande, aquí estoy pegando una pequeña parte del código para entender mejor.
Cuando selecciono nombre de usuario
desde campo de selección
, luego el siguiente campo dob
deshabilitado debe poblarse. Así que funciona bien.
Pero el problema está en mi formulario, tengo una opción llamada botón de guardado parcial
que guardará en almacenamiento local
. Pero esto no se mostrará en el campo dob cuando actualicemos la página.
Para solucionar esto, cambié la propiedad de valor a defaultValue
, entonces se mostrarán los datos pero fallará al establecer el valor cuando se activa el evento onchange select
.
Incluso intenté usar tanto defaultValue como la propiedad de valor juntas, pero obtengo un error que dice:
index.js:1 Advertencia: MuiOutlinedInputInput contiene un elemento de tipo texto con las props value y defaultValue. Los elementos de entrada deben ser controlados o no controlados (especifica solo la prop value o la prop defaultValue, pero no ambas). Decide entre usar un elemento de entrada controlado o no controlado y elimina una de estas props. Más información: https://reactjs.org/link/controlled-components
<FormControl >
<InputLabel id="userLabel" >Username</InputLabel>
<Select
labelId="userLabel"
id="userLabelId"
MenuProps={MenuProps}
label="Username"
name="userName"
onChange={(e) => {
handleChange(e);
}}
value={userDetail.userName ?? ''}
>
<MenuItem value="">
<em>Ninguno</em>
</MenuItem>
{userList ? userList.map((user) => (
<MenuItem key={user.id} value={user.id ?? ''}>
{user.userName}
</MenuItem>
)) : null}
</Select>
</FormControl>
<TextField
margin="normal"
required
id="dob"
label="Fecha de nacimiento"
name="dob"
value={userDetail.dob ?? ''}
disabled
/>
davy.ai
El problema mencionado en el código proporcionado está relacionado con la configuración del valor de un campo de selección basado en los datos del almacenamiento local. La solución intentada es cambiar la propiedad
value
adefaultValue
, pero esto causa problemas cuando se activa el eventoonChange
en el campo de selección.Una solución podría ser establecer condicionalmente la propiedad
value
solo si no hay datos del almacenamiento local presentes. De esta manera, el valor del campo de selección se establecerá en los datos almacenados al actualizar la página, pero también permitirá que el eventoonChange
actualice el valor si es necesario.Además, el mensaje de advertencia sugiere utilizar un elemento de entrada controlado o no controlado, pero no ambos. Un elemento de entrada controlado es aquel en el que el valor es controlado por React, mientras que un elemento de entrada no controlado depende del navegador para mantener el estado. Para solucionar esta advertencia, se recomienda establecer solo la propiedad
value
o la propiedaddefaultValue
, pero no ambas.Aquí tienes un fragmento de código actualizado con la solución sugerida:
Ten en cuenta que se han eliminado los atributos
value
ydefaultValue
, y ahora elvalue
se establece condicionalmente, ya sea en los datos almacenados o en el valor del estado. Los datos almacenados se recuperan al comienzo del componente usandouseState
ylocalStorage.getItem
. La actualización del estado y los datos del almacenamiento local se manejan mediante el métodohandleChange
.