Llegué a una situación extraña en la que console.log muestra que la matriz está vacía. Sin embargo, cuando lo abro, veo 2 elementos en él. Este comportamiento ni siquiera representa el componente porque cree que las conversations están vacías.

Aquí está el fragmento de código:

 useEffect(() => { if (headers.length > 0) { let fetchedConversations = []; headers.map((conversation) => conversation.conversators.filter(async (conversator) => { if (conversator !== user._id) { let conv = await getUserById(conversator); fetchedConversations.push(conv); } }) ); setConversations((prevState) => fetchedConversations); } }, [headers]);

getUserById.js

 export const getUserById = async (id) => { //console.log(id); try { const config = { headers: { "Context-Type": "application/json", }, withCredentials: true, credentials: "include", }; const response = await axios.get(`${USERS_PATH}/${id}`, config); return response.data; } catch (err) { let data = await err.response?.data; console.log(data); } };

Finalmente, aquí está el fragmento de código donde debería representar algo en la pantalla. Tenga en cuenta que cuando hago clic en la etiqueta p, muestra (finalmente) que hay 2 elementos dentro. Sin embargo, conversations.length > 0 no parece volver a representar esto.

 return ( <> <p onClick={() => console.log(conversations)}>sdas</p> {conversations.length > 0 && conversations.map((conversation, id) => ( <UserContainer key={id}> <UserIcon></UserIcon> <UserInfo> <UserName> {conversation?.name} {conversation?.surname} </UserName> <LastMessage> <SenderInfo></SenderInfo> </LastMessage> </UserInfo> </UserContainer> ))} </> ); }

Las primeras dos consolas muestran una matriz "vacía", pero no cuando se abren. La última consola es cuando presiono la etiqueta p