मैं अपना उपयोगकर्ता नाम फायरबेस से प्राप्त करने का प्रयास कर रहा हूं। कंसोल.लॉग सही उपयोगकर्ता नाम दिखाता है। लेकिन मैं अपने tet घटक में इसे दिखाने के लिए useEffect के अंदर uName का उपयोग कैसे कर सकता हूं?
useEffect(async () => {
var username = await firebase
.database()
.ref("users/" + authUser + "/name")
.once("value")
.then(function(snapshot) {
return snapshot;
});
var slicedName = JSON.stringify(username);
var uName = slicedName.slice(1, -1);
console.log("USERNAMELOG", uName);
}, []);
1 उत्तर
useEffect हुक async/await मुख्य हैंडलर के रूप में कार्य करने की अनुमति नहीं देता है। आप इसे एक अलग फ़ंक्शन के रूप में प्राप्त कर सकते हैं और इसे हुक के भीतर निष्पादित कर सकते हैं:
async function getData(authUser) {
return firebase
.database()
.ref('users/' + authUser + '/name')
.once('value')
}
useEffect(() => {
getData(authUser)
.then(username => {
const slicedName = JSON.stringify(username)
const uName = slicedName.slice(1, -1)
console.log("USERNAMELOG", uName)
})
}, [])
जहां तक uName का उपयोग करने की बात है, तो आप इसे घटक स्थिति या वैश्विक स्टोर के रूप में सेट कर सकते हैं यदि आपके पास अन्य घटकों से सुलभ होने के लिए एक (या संदर्भ) है।
संपादित करें: यदि आप redux का उपयोग कर रहे हैं तो आपके पास uName के साथ वैश्विक स्थिति को अपडेट करने में सक्षम होने के लिए एक प्रेषण कार्य होना चाहिए। उपरोक्त स्निपेट से केवल यही बदलना चाहिए कि आप console.log को अपने द्वारा बनाए गए कुछ प्रेषण फ़ंक्शन के साथ प्रतिस्थापित करते हैं और uName चर को तर्क के रूप में देते हैं। एक बार जब यह आपकी Redux स्थिति में आ जाए, तो आपको उस मान को उन घटकों तक प्रचारित करने में सक्षम होना चाहिए जिन्हें मूल्य की आवश्यकता है।