从 react-native-firebase/dynamicLinks 获取对象而不是 URL 的字符串

Getting object instead of string of URL from react-native-firebase/dynamicLinks

我正在尝试为我的用户获取 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”:空,“_X”:空} 预期输出:https://demoproject.page.link/xYan8S7xjTTB7aLQ6

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

这应该没问题。

据我所知,代码存在一些问题。

我们必须使用 then 或 async / await 指定等待异步函数调用。

如果我们不在函数调用后不等待响应的情况下提供异步函数和处理数据的等待,那么我们可能会得到一个空对象,就像您现在得到的那样。

此外,我们不能使用异步函数作为异步渲染的反应组件。为此,我们可以使用状态在 运行 时间更新我们的组件。

必须尝试使用​​我在下面提供的代码,并对您现有的代码进行一些修改:

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