Не могу дождаться обещания в методе карты - PullRequest
Новая
       12

Не могу дождаться обещания в методе карты

2 голосов
/ 30 января 2020

Я пытаюсь отобразить список комнат, а затем получить пользовательские данные каждого получателя в комнате, и, поскольку в комнате может быть только 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>
    );
}

Таким образом, я отфильтровываю свой собственный идентификатор пользователя из массива пользователей, а затем беру оставшийся идентификатор и использую обещание, чтобы получить для него пользовательские данные. Но проблема здесь в том, что всякий раз, когда я вызываю await, он выдает ошибку:

react-dom.development. js: 14748 Uncaught Ошибка: объекты недопустимы как дочерний элемент React (найдено : [обещание объекта]). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Если я попытаюсь использовать .then(), на самом деле он вообще не вызывается, как, если я положу console.log там ничего не печатает. Любая идея, как я могу выполнить sh мою задачу?

1 Ответ

5 голосов
/ 30 января 2020

Вы не можете вызвать функцию asyn c в методе render.

Asyn c функции возвращают объект Promise, поэтому эта 

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

вернет массив объектов Promise, и вы не можете отобразить и Object.

Вам нужно вызвать асин c функцию в componentDidMount и отобразить ее при загрузке данных.

Проверка этот ответ для примера того, что делать.

...