Question

我想从promise中检索一个字段（现在），并将其作为我的弹出模式中的标题呈现。我已经答应使用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;

Answer 1

问题是，您正在渲染组件，并且该组件正在等待promise的解决，您应该在模态组件的父级上解决Promise之后添加模态，不要尝试暂停执行，这确实是有问题的，只需使用通用规则（如果有一个新的prop-> render，如果有一个状态更改-> render）来响应渲染，状态更改就假定实际的组件已经被渲染。

如何暂停渲染直到承诺被解决？ ReactJs

1 个答案: