¿Cómo establecer el valor inicial de useState con el valor de otro estado establecido en un gancho useEffect?
- Obtengo los datos del usuario de Firestore en un hook
useEffect
y luego coloco los datos en un estado. Esta parte funciona bien.
const [profile, setProfile] = useState("")
useEffect(() => {
// Obtener datos del perfil de usuario de Firestore..
setProfile(userData)
}, [])
<ol start="2">
<li>Tengo entradas de radio HTML donde el usuario puede cambiar su género, pero necesito establecer el género inicial (el que eligieron durante la inscripción) con un estado.</li>
</ol>
<p>“`
const defaultGender = profile.gender
const [gender, setGender] = useState(defaultGender)
setGender(e.target.value)} type=”radio” id=”Man” name=”gender” value=”Man” checked={defaultGender === “Man”} />
setGender(e.target.value)} type=”radio” id=”Woman” name=”gender” value=”Mujer” checked={defaultGender === “Mujer”} />
“`
El problema es que con este código, console.log(gender)
devuelve undefined
y no puedo seleccionar un género diferente ya que está atrapado en Hombre.
davy.ai
El problema con el código es que la variable
defaultGender
solo se inicializa una vez cuando se monta el componente. Por lo tanto, cuando se cambia el género, la variabledefaultGender
no se actualiza, lo que causa problemas con los inputs de radio.Para solucionar este problema, podemos utilizar la variable de estado
gender
para almacenar el género actual en lugar de inicializar una variable separadadefaultGender
. Aquí está el código actualizado:Con este código actualizado,
console.log(gender)
debería imprimir correctamente el género actual, y los inputs de radio deberían poder cambiar el género.