亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何僅在承諾處于活動狀態時才顯示和隱藏彈出窗口?反應

如何僅在承諾處于活動狀態時才顯示和隱藏彈出窗口?反應

一只甜甜圈 2022-08-27 15:24:17
我嘗試使用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>
查看完整描述

1 回答

?
千巷貓影

TA貢獻1829條經驗 獲得超7個贊

您可以嘗試 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 />);

}    


查看完整回答
反對 回復 2022-08-27
  • 1 回答
  • 0 關注
  • 91 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號