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 /
  • El gancho (hook) del array de usuarios no se está actualizando con todos los elementos de la lista.

El gancho (hook) del array de usuarios no se está actualizando con todos los elementos de la lista.

06 Aug, 2023 Programación

Así que estoy creando una aplicación MERN simple, el backend funciona correctamente, pero al trabajar con el hook useState en el frontend está causando problemas.
Lo que estoy intentando hacer es extraer los datos de “usuarios” (un array de objetos con el campo nombre de usuario) desde los endpoints del backend y actualizar el array de usuarios que es un hook, ¡pero solo se actualiza con el último elemento del nombre de usuario entrante y no con la lista de todos los nombres de usuario!

Código para extraer y actualizar el hook:

const [users, setUsers] = useState([]);

const getUsers = () => {
    fetch("http://localhost:5000/users")
        .then(res => res.json())
        .then(data => {
            console.log(data);      //línea 17
            data.map((item) => {
                console.log([item.username])      //línea 19
                setUsers([...users, item.username]);
            });
        })
        .catch(err => console.log(err));
}

useEffect(() => {
    getUsers();
}, []);

console.log(users);       //línea 30

¡Lo que quiero es obtener una lista de nombres de usuario en el estado “usuarios”!
Algo como esto:
usuarios = [“spidey”, “thor”, “ironman”, “capitán américa”]

También la función console.log no muestra ningún error…
Ventana de la consola: [enlace de la imagen]

Por favor, ayuda, ¡no puedo entender dónde está el error!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema con la actualización del useState hook con una matriz de nombres de usuario desde el punto final del backend

    El problema parece estar en la forma en que se llama a la función setUsers dentro del método map. Dado que setUsers es una operación asíncrona, es posible que no actualice el estado inmediatamente.

    Una solución para este problema puede ser usar una variable temporal para almacenar el nuevo estado y actualizar el estado una vez que se hayan mapeado todos los elementos. Aquí hay un código actualizado que debería funcionar:

    const [users, setUsers] = useState([]);

const getUsers = () => {
    fetch("http://localhost:5000/users")
        .then(res => res.json())
        .then(data => {
            console.log(data);      // línea 17
            let newUsers = [];
            data.forEach((itm) => {
                console.log([itm.username])      // línea 19
                newUsers.push(itm.username)
            })
            setUsers(newUsers);
        })
        .catch(err => console.log(err))
}

useEffect(() => {
    getUsers();
}, [])

console.log(users);       // línea 30

    Aquí estamos utilizando una variable temporal newUsers para almacenar el estado actualizado y luego establecer el estado utilizando la función setUsers una vez que se hayan iterado todos los elementos. También estamos utilizando el método forEach en lugar del método map, ya que no necesitamos devolver nada desde el bucle.

    Esto debería actualizar el estado de users con una matriz de nombres de usuario según sea necesario.

Comments are closed.