mi problema es el siguiente. Tengo una lista de usuarios y cada uno tiene una lista de propiedades, quisiera mostrarlos en una tabla en React, la lista de usuarios la recibo como un array de objetos, el problema es que la información de cada uno la debo obtener de manera asíncrona (también son un array de objetos) pero siempre recibo una promesa pendiente, este es el código:
const UsersTable = (props) => {
const { users } = props;
const getUserData = async (user_id) => {
const userData = await axios
.post("/user", { user_id })
.then(({ data }) => data)
.catch((error) => {
console.log(error);
});
return userData;
};
return (
<>
<table>
<thead>
<tr>
<th>User</th>
</tr>
</thead>
<tbody>
{users
.slice(
currentPage * pageSize,
(currentPage + 1) * pageSize
)
.map((user) => {
const userData = getUserSteps(user.id).then((data)=> data);
console.log(userData); //Imprime una promesa pendiente
return (
<tr>
<th scope="row">{user.name}</th>
</tr>
);
})}
</tbody>
</table>
</>
);
};
He intentado también colocando una función asíncrona dentro de la función map, pero me sigue devolviendo promesas:
{users
.slice(
currentPage * pageSize,
(currentPage + 1) * pageSize
)
.map((user) => {
const getData = async() => {
const data = await getUserData(user.id).then((data)=> data);
return await Promise.all(data)
}
console.log(getData()); //Imprime una promesa pendiente
return (
<tr>
<th scope="row">{user.name}</th>
</tr>
);
})}
La idea es poder obtener el Array de las propiedades de cada usuario para poder hacer otro pasarle la función map e imprimir el resto de las celdas de la tabla.
Muchas gracias.
EDIT: Estoy intentando con una función anónima asíncrona:
.map((user) => {
const userData = [];
(async () => {
const data = await getUserData(user.id);
data.map((data) => {
userData.push(data);
});
})();
console.log(userData);
return (
<tr>
<th scope="row">{user.name}</th>
{userData.map((data) => {
return <td>{data}</td>;
})}
</tr>
);
}
Los datos se van añadiendo al Array userData pero en el render no aparece, en consola sale un Array vacío que al desplegarlo muestra los datos, pero con la leyenda "this value was evaluated upon first expanding it may have changed since then".
const { users } = props
solo contiene elid
de cada usuario? ¿No tiene la propiedadname
? saludosname
de hecho si solo renderizo la tabla con los nombres, todo sale perfecto, el problema es cuando quiero llamar las propiedades de cada usuario y pasarle a ese arreglo la función map() para retornar JSX con la información dentro de celdas, para ello uso la funcióngetUserData(user.id)
currentPage
ypageSize
? ¿vienen dentro deusers
?getUserData
, trae información poruser.id
, la cual no esta disponible enconst { users } = props
, esa es la razón por la cual debes iterar elmap
2 veces, ¿Puedes confirmar que esa es la situación?