如何暂停渲染直到 promise 已解决？ ReactJs

Question

我想从 promise 中检索一个字段（暂时）并将其呈现为我的弹出模式中的标题。 我使用useEffect解决了 promise 问题，它确实填充了我的模态，但是在等待响应设置值时，它的出现会稍有延迟。

我尝试在同一个文件中的 Modal 下面创建另一个 function 以使用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;

Answer 1

问题是，您正在渲染组件并且该组件正在等待 promise 被解析，您应该在 Promise 在 Modal 组件的父级上解析后添加模态，不要尝试暂停执行，那是真的有问题，只需使用通用规则进行反应渲染（如果有新的道具 -> 渲染，如果有 state 更改 -> 渲染），state 更改假定实际组件已经渲染。