无法等待地图方法中的承诺

Question

我正在尝试呈现房间列表，然后获取房间中每个收件人的用户数据，由于房间中只能有 2 个用户(您 + 另一个人(，收件人只是另一个人。

async renderRooms(room, user) {
const recipentId = room.users.filter(id => id != user.id)[0],
recipients = await userService.getOne(recipentId);
console.log(recipients)
return (
<ListGroupItem tag="a" href="#" data-unread="3" action key={room._id} onClick={this.onRoomOpened.bind(this, room._id)}>
<img src={""} />
<div className="details">
<div className="recipient-name"></div>
<div className="last-message">
<MessageCircle className="feather" />
This is an example last message...
</div>
</div>
</ListGroupItem>
);
}
render() {
if(this.props.rooms.length < 1) return <LoadingPage />;
return (
<userContext.Consumer>
{({user}) => {
if(this.state.roomId) return <ActiveRoom id={this.state.roomId} />;
else
return (
<ListGroup className="recipients">
{this.props.rooms.map(room => this.renderRooms(room, user))}
</ListGroup>
);
}}
</userContext.Consumer>
);
}

这样，我从用户数组中过滤掉我自己的用户 ID，然后我获取剩余的 ID 并使用承诺来获取它的用户数据。但这里的问题是，每当我调用await时，它都会抛出错误：

react-dom.development.js：14748 未捕获的错误：对象无效 作为 React 子项(找到：[对象承诺](。如果您打算渲染 子项的集合，请改用数组。

如果我尝试使用.then()它实际上似乎根本没有被调用，就像，如果我在那里放一个console.log，它什么也没打印出来。 知道我怎样才能完成我的任务吗？

Answer 1

不能在render方法中调用异步函数。

异步函数返回一个 Promise 对象，所以这个

{this.props.rooms.map(room => this.renderRooms(room, user))}

将返回一个 Promise 对象数组，您无法渲染和 Object。

您需要在componentDidMount中调用异步函数，并在加载数据时呈现它。

查看此答案以获取该怎么做的示例。