时间戳

首页 > 解决方案 > 如何暂停渲染直到承诺解决？反应式

javascript - 如何暂停渲染直到承诺解决？反应式

问题描述

我想从 Promise 中检索一个字段（暂时）并将其呈现为我的弹出模式中的标题。我得到了通过使用来解决的承诺useEffect，它确实填充了我的模态，但是在等待响应被设置值时，它的出现会有轻微的延迟。

我尝试在同一个文件中在 Modal 下面创建另一个函数来使用aync/await，但是我很难弄清楚它们的放置位置，因为我不断收到错误使用它的错误，或者没有任何来自 promise 的传回。

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;

标签： javascriptreactjsasync-await

解决方案

问题是，您正在渲染组件并且该组件正在等待解决承诺，您应该在承诺已解决后在 Modal 组件的父级上添加模式，不要尝试暂停执行，这真的有问题，只需让 react 使用通用规则渲染（如果有新的 prop -> 渲染，如果有状态更改 -> 渲染），状态更改假定实际组件已经渲染。

推荐阅读