Как приостановить рендеринг, пока обещание не будет выполнено? ReactJs - PullRequest
Новая
       5

Как приостановить рендеринг, пока обещание не будет выполнено? ReactJs

0 голосов
/ 16 апреля 2020

Я хочу извлечь поле (пока) из обещания и отобразить его в качестве заголовка в моем всплывающем окне. Я получил обещание быть выполненным с помощью useEffect, и оно заполняет мой модальный режим, однако есть небольшая задержка для его появления, так как он ожидает ответа, чтобы установить значение.

Я пытался играть вокруг создания другой функции ниже Modal в том же файле для использования aync/await, однако я не могу понять, где их разместить, так как я получаю ошибки за неправильное использование, или ничего из обещания не возвращается. 

import React, { useState, useEffect } from 'react';
import './Modal.css';

 const Modal = ({close, item}) => {
    const [response, setResponse] = useState(null);
   useEffect(() => {
        item.then(object => setResponse(object.data.title))
   }, [])

    return (
   <div className='modal'>
       <div className='popup'>
           <h1>{response}</h1>
          <button onClick={ () => { close(false) }}>close me</button>
       </div>
   </div>
   );
}

export default Modal;

1 Ответ

0 голосов
/ 16 апреля 2020

Дело в том, что вы визуализируете компонент, и этот компонент ожидает разрешения обещания, вы должны добавить модальное после разрешения обещания на родительском компоненте Модального компонента, не пытайтесь приостановить выполнение Это действительно проблематично c, просто разрешите реагировать на рендеринг, используя общие правила (если есть новый объект -> рендеринг, если есть изменение состояния -> рендеринг), изменения состояния предполагают, что фактический компонент уже был отрендерен.

...