一只甜甜圈
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 />);
}
添加回答
舉報
0/150
提交
取消