不能在地图方法中等待承诺

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 并使用 promise 为其获取用户数据。但这里的问题是，每当我调用await它时都会抛出错误：

react-dom.development.js:14748 未捕获的错误：对象作为 React 子对象无效（发现：[object Promise]）。如果您打算渲染一组子项，请改用数组。

如果我尝试使用.then()它实际上似乎根本没有被调用，例如，如果我将 aconsole.log放在那里，它不会打印任何内容。知道我如何完成我的任务吗？

Answer 1

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

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

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

将返回一组 Promise 对象，并且您无法渲染和 Object.

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

检查此答案以获取如何操作的示例。