Javascript 如何仅在promise处于活动状态时显示和隐藏弹出窗口？反应

我尝试处理

在使用firebase-登录facebook时存在不同凭据错误的处理帐户。在点4a上是
var password=promptUserForPassword（）；//TODO:实现promptUserForPassword。
我曾尝试过用promise实现它，但老实说，我不知道在这种情况下如何呈现弹出组件

现在我有这个承诺：

passwordAskPromise.then((password) => {
                            console.log(password)
                            firebase.auth().signInWithEmailAndPassword(email, password).then(function(userCredential) {
                                return userCredential.user.linkWithCredential(pendingCred);
                              })
                        })

承诺代码：

const passwordAskPromise = new Promise((resolve, reject) => {
    const setDecision = decision => {
        if(decision)
            resolve(decision)
        else
            reject(decision)
        }

    ReactDOM.render(<AskAboutPassword setDecision={(value) => setDecision(value)}/>, document.getElementById("popup"))
})

export default passwordAskPromise;

const passwordAskPromise=新承诺（（解析、拒绝）=>{
const setDecision=decision=>{
如果（决定）
决心（决定）
其他的
拒绝（决定）
}
ReactDOM.render（setDecision（value）}/>，document.getElementById（“弹出”））
})
导出默认密码askpromise；

和AskAboutPassword：

const AskAboutPassword = props =>{ 

    const [password, setPassword] = useState('')

    return (
        <div className={styles.AskAboutPasswordContainer}>
            <input type="text" value={password} onChange={(e)=>setPassword(e.target.value)}/>
            <button onClick={() => props.setDecision(password)}>YES</button>
            <button onClick={() => props.setDecision(false)}>NO</button>
        </div>
    )
}

export default AskAboutPassword;

const AskAboutPassword=props=>{
const[password，setPassword]=useState（“”）
返回(
setPassword（e.target.value）}/>
props.setDecision（密码）}>是
props.setDecision（false）}>否
)
}
导出默认AskAboutPassword；

所有的逻辑都是有效的，但此时这个“弹出窗口”一直在屏幕上，因为我添加了
，您可以尝试一下，它提供了一个方便的usePromiseTracker钩子，如果请求正在执行，它将返回true

您可以指定应跟踪哪些承诺。它主要设计用于显示微调器或其他视觉反馈，这在您的情况下应该很有用

包装您的承诺以跟踪其状态：

import { trackPromise } from 'react-promise-tracker';

[...]

trackPromise(fetch(something));

// now react-promise-tracker keeps track of the promise returned by fetch(something)

然后，在任何组件中，您都可以：

import { usePromiseTracker } from 'react-promise-tracker';
[...]

const MyComponent = () => {
  const { promiseInProgress } = usePromiseTracker();

  return (promiseInProgress ? <ComponentIfPromiseFlying /> : <OtherComponent />);
}    

从“react PromiseTracker”导入{usePromiseTracker}；
[...]
常量MyComponent=（）=>{
const{promiseInProgress}=usePromiseTracker（）；
返回（promiseInProgress？：）；
}    
我试过这个，但我不知道如何用输入元素制作一个组件，我可以通过输入元素而不是微调器…编辑了我的答案，基本上是用文档中的内容，但这可能会有帮助…祝你好运！我曾经答应过你，但你的回答对我帮助很大：P