es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo establecer el valor inicial de useState con el valor de otro estado establecido en un gancho useEffect?

¿Cómo establecer el valor inicial de useState con el valor de otro estado establecido en un gancho useEffect?

27 May, 2023 Programación
  1. 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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 variable defaultGender 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 separada defaultGender. Aquí está el código actualizado:

    const [profile, setProfile] = useState("");
const [gender, setGender] = useState("");

useEffect(() => {
  // Obtener datos del perfil del usuario desde Firestore...
  setProfile(userData);
  // Establecer el género inicial
  setGender(userData.gender);
}, []);

...

<input onchange="{(e)" ==""> setGender(e.target.value)}
  type="radio"
  id="Man"
  name="gender"
  value="Man"
  checked={gender === "Man"}
/>
<label htmlfor="Man">Hombre</label>

<input onchange="{(e)" ==""> setGender(e.target.value)}
  type="radio"
  id="Woman"
  name="gender"
  value="Woman"
  checked={gender === "Woman"}
/>
<label htmlfor="Woman">Mujer</label>

    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.

Comments are closed.