#javascript #reactjs #firebase #react-native #react-native-firebase
#javascript #reactjs #firebase #react-native #react-native-firebase
Вопрос:
Я пытаюсь получить URL-адрес для своего пользователя.
export default function InvitationLink (){
async function CreateLink(){
await dynamicLinks().buildShortLink(
{
link:"https://demoproject.com/?invitedby=" user uid ,
domainUriPrefix:"https://demoproject.page.link",
android:{
minimumVersion:"124",
fallbackUrl:"www.google.com",
packageName:"com.demoproject.android"
}
}
).then((newLink) =>{
console.log("Created link: ",newLink); // Output: Created link: https://demoproject.page.link/xYan8S7xjTTB7aLQ6
return newLink
})
}
const GenerateLink = () =>{
const newLink = CreateLink();
console.log("Generated Link : ",newLink) // output: Generated Link : {"_U": 0, "_V": 0, "_W": null, "_X": null}
return <Text>Link Created</Text>
}
return(
<View style={{flex:1, flexDirection:'column', justifyContent:"center", alignItems:'center', borderColor:'black', borderWidth:5 }}>
<GenerateLink/>
</View>
)
}
Вместо URL-адреса он выбрасывал объект.
Фактический результат: {«_U»: 0, «_V»: 0, «_W»: null, «_X»: null}
Ожидаемый результат: https://demoproject.page.link/xYan8S7xjTTB7aLQ6
Ответ №1:
Насколько я вижу, с кодом есть некоторые проблемы.
Мы должны указать ожидание асинхронных вызовов функций с помощью then или async / await .
Если мы не предоставляем такое ожидание для асинхронных функций и обработки данных после вызова функции, не дожидаясь ответа, тогда мы можем получить нулевой объект, как вы получаете сейчас.
Кроме того, мы не можем использовать асинхронные функции в качестве наших компонентов react для асинхронного рендеринга. для этого мы можем использовать состояние для обновления нашего компонента во время выполнения.
Необходимо попробовать с кодом, который я предоставляю ниже, с некоторыми изменениями в вашем существующем коде :
export default function InvitationLink (){
const [dynamicLink, setDynamicLink] = useState("")
async function CreateLink(){
await dynamicLinks().buildShortLink(
{
link:"https://demoproject.com/?invitedby=" user uid ,
domainUriPrefix:"https://demoproject.page.link",
android:{
minimumVersion:"124",
fallbackUrl:"www.google.com",
packageName:"com.demoproject.android"
}
}
).then((newLink) =>{
console.log("Created link: ",newLink); // Output: Created link: https://demoproject.page.link/xYan8S7xjTTB7aLQ6
return newLink
}).catch((err) => {
return `Error ${err.message}`
})
}
const GenerateLink = async () =>{
try {
const newLink = await CreateLink();
console.log("Generated Link : ",newLink) // output: must be a string url
setDynamicLink(newLink)
} catch(err) { // handle issue if we got issue in CreateLink function call
console.log("Error ": err)
setDynamicLink("Error at creating dynamic link")
}
}
return(
<View style={{flex:1, flexDirection:'column', justifyContent:"center", alignItems:'center', borderColor:'black', borderWidth:5 }}>
<Text>{dynamicLink}</Text>
</View>
)
}
Ответ №2:
export default function InvitationLink() {
async function CreateLink() {
const newLink = await dynamicLinks().buildShortLink({
link: "https://demoproject.com/?invitedby=" user uid,
domainUriPrefix: "https://demoproject.page.link",
android: {
minimumVersion: "124",
fallbackUrl: "www.google.com",
packageName: "com.demoproject.android",
},
});
console.log("Created link: ", newLink); // Output: Created link: https://demoproject.page.link/xYan8S7xjTTB7aLQ6
return newLink;
}
const GenerateLink = () => {
const newLink = await CreateLink();
console.log("Generated Link : ", newLink); // output: Generated Link : {"_U": 0, "_V": 0, "_W": null, "_X": null}
return <Text>Link Created</Text>;
};
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
borderColor: "black",
borderWidth: 5,
}}
>
<GenerateLink />
</View>
);
}
Это должно работать нормально.