Переменная React.js пуста при использовании в массиве

Я пытаюсь сделать так, чтобы массив компонентов отображал имя пользователя пользователя на основе идентификатора из базы данных или «УДАЛЕН», если пользователь не существует. Моя функция работает правильно, и значение отображается в журналах, но фактически отображаемый компонент имеет пустую строку там, где должно быть значение.

postsList = this.state.postsArray.map(post => {
 var author = "";
 AccountService.getUsernameFromId(post.author, function(id, username) {
 author = username;
 console.log(author);
 }); 
 return(
 <Item key={post._id}>
 <Item.Image size="small" src={post.image} />
 <Item.Content>
 <Item.Header as="a" href={"/blog/post/?id=" + post._id}>{post.name}</Item.Header>
 <Item.Meta>{author} | {post.date_created}</Item.Meta>
 <Item.Description>{post.post_contents.slice(0, 200) + "..."}</Item.Description>
 </Item.Content>
 </Item>
 );
 });

Может кто-нибудь, пожалуйста, помогите мне с этим?

Решение проблемы

я еще не уверен, что getUsernameFromId, но я чувствую, что вы пытаетесь сделать запрос API на сервер во время карты.

поэтому в начале цикла вы делаете запрос к API, компонент отображается, не дожидаясь ответа API, когда запрос API разрешается, результат регистрируется, что является ожидаемым поведением.

Вам нужно будет объявить ее AccountService.getUsernameFromIdкак асинхронную функцию или сделать ее функцией на основе обещаний.

тогда вы можете написать свой код следующим образом

postsList = this.state.postsArray.map(async post => {
 var author = await AccountService.getUsernameFromId(post.author); 
 
 return(
 <Item key={post._id}>
 <Item.Image size="small" src={post.image} />
 <Item.Content>
 <Item.Header as="a" href={"/blog/post/?id=" + post._id}>{post.name}</Item.Header>
 <Item.Meta>{author} | {post.date_created}</Item.Meta>
 <Item.Description>{post.post_contents.slice(0, 200) + "..."}</Item.Description>
 </Item.Content>
 </Item>
 );
});