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

Question

我尝试使用firebase处理Facebook登录 - firebase doc。关于第4a点是我试图用承诺来做到这一点，但老实说，我不知道在这种情况下如何渲染弹出组件......Handling account-exists-with-different-credential Errorsvar password = promptUserForPassword(); // TODO: implement promptUserForPassword.现在我有这个承诺：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;和 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;所有逻辑都有效，但此时此“弹出窗口”一直在屏幕上，因为我添加到索引.html文件。<div id="popup></div>

Answer 1

您可以尝试 https://www.npmjs.com/package/react-promise-tracker，它提供了一个方便的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 />);

}