Получение объекта вместо строки URL из react-native-firebase / dynamicLinks

#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>
  );
}

 

Это должно работать нормально.