尝试将我上传的图片的 url 存储在 firestore 中时遇到错误答案

【问题标题】：I am encountering a bug when trying to store the url for my uploaded image in firestore尝试将我上传的图片的 url 存储在 firestore 中时遇到错误
【发布时间】：2019-06-07 12:08:59
【问题描述】：

我的应用运行良好，只是它在尝试存储上传图片的 url 时会产生错误。

FirebaseError：使用无效数据调用函数 DocumentReference.set()。不支持的字段值：未定义（在字段 eventImgUrl 中找到）

const onSubmit = (e) => {
        e.preventDefault();

        if(eventImage) {

        const uploadImage = storage.ref(`EventImages/${values.eventName}`).put(eventImage);
        uploadImage.on('state_changed',
            (error) => {
                console.log(error);
            },
            () => {
                storage.ref('EventImages').child(values.eventName).getDownloadURL().then(url =>{
                    console.log(url);
                    setUrl(url);
                })

            }
        );
        }

        dbref.add({
            eventName: values.eventName,
            eventVenue: values.eventVenue,
            eventAddress: values.eventAddress,
            eventCategory: values.eventCategory,
            eventOrganizer: values.eventOrganizer,
            eventPhone: values.eventPhone,
            eventEmail: values.eventEmail,
            eventDetails: values.eventDetails,
            eventDate: selectedDate.toDateString(),
            eventTime: selectedDate.toLocaleTimeString(),
            eventImgUrl: eventImageUrl
        }).then((docRef) => {
            console.log("Document written with ID: ", docRef.id);
            setValues('');
            setImg('');
            setUrl('');
        }).catch((error) => {
            console.error("Error adding document: ", error);
        });

    }

我想将 img url 存储到我创建的文档中。我正在为 url 使用一个钩子： const [eventImageUrl, setUrl] = React.useState();

【问题讨论】：

你能console.log(eventImageUrl)
我已经在 console.log(url); 上检查过了

标签： reactjs google-cloud-firestore

【解决方案1】：

当你

console.log(url)

有什么价值吗？现在尝试 console.log 你的

eventImageUrl

在将它添加到 db 之前...它说什么？我相信它将是不确定的。您也可以尝试对 url 进行硬编码

eventImgUrl: "www.test.test"

有效吗？

如果是这样，您就知道问题出在您的 eventImageUrl 挂钩上。为了帮助您更多，我们需要完整的代码

更新

试试这个

const onSubmit = (e) => {
e.preventDefault();
if (eventImage) {
    const uploadImage = storage.ref(`EventImages/${values.eventName}`)
    uploadImage.put(eventImage).then(() => {
        storage.ref('EventImages').child(values.eventName).getDownloadURL().then(url => {
            dbref.add({
                eventName: values.eventName,
                eventVenue: values.eventVenue,
                eventAddress: values.eventAddress,
                eventCategory: values.eventCategory,
                eventOrganizer: values.eventOrganizer,
                eventPhone: values.eventPhone,
                eventEmail: values.eventEmail,
                eventDetails: values.eventDetails,
                eventDate: selectedDate.toDateString(),
                eventTime: selectedDate.toLocaleTimeString(),
                eventImgUrl: url
            }).then((docRef) => {
                console.log("Document written with ID: ", docRef.id);
                setValues('');
                setImg('');
                setUrl('');
            }).catch((error) => {
                console.error("Error adding document: ", error);
            });
        })
    })

}
}

【讨论】：

当我手动输入网址时它可以工作：firebasestorage.googleapis.com/v0/b/envy-hxxdini.appspot.com/o/…
请回答我提出的所有问题
console.log(url) 在我的浏览器控制台中没有显示任何内容
@Carl 尝试使用我更新的答案更改您的代码
它没有工作对不起..它只是上传图像，即上传完成后代码不运行

【解决方案2】：

错误消息告诉您eventImageUrl 未定义。这意味着你从来没有给它赋值。在您在这里显示的代码中，我们甚至看不到它是在哪里声明的。

您必须调试代码并确保 eventImageUrl 包含您期望的值。

【讨论】：

表示eventImgUrl中包含的值不受支持。
我使用钩子声明它：[eventImageUrl, setUrl] = React.useState();
仔细阅读错误信息。它说这个值是未定义的。
错误提示：FirebaseError: Function DocumentReference.set() 调用了无效数据。不支持的字段值：未定义（在字段 eventImgUrl 中找到）
你看到它说不支持的值是“未定义”的部分吗？

【解决方案3】：

错误来自您的const [eventImageUrl, setUrl] = React.useState() 将 eventImageUrl 更改为 url。这似乎是你的问题

【讨论】：

它仍然产生相同的错误 FirebaseError: Function DocumentReference.set() 调用了无效数据。不支持的字段值：未定义（在字段 eventImgUrl 中找到）
console.log(url) 打印什么？
控制台不打印任何东西..但是当我手动输入网址时它可以工作