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

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 = () => {&nbsp; const { promiseInProgress } = usePromiseTracker();&nbsp; return (promiseInProgress ? <ComponentIfPromiseFlying /> : <OtherComponent />);}&nbsp; &nbsp;&nbsp;