如何将数组传递给 Firestore？

Question

我正在尝试使用以下代码将数组传递给 Firestore。问题是 Firestore 中的数组始终为空。如果我手动传递一个数组，它就可以工作。如果我 console.log 它输出的数组，它不是空的。

const handleSubmit = (e) => {
    ...
    finally {
        ...
        console.log(photoUrlArray) // THIS OUTPUTS THE ARRAY

        collectionRef.add({
            field1: someData,  THIS GETS POSTED
            photos: photoUrlArray,    THIS DOESN'T
        })
    }
}

如果手动发布一个数组，它可以工作。

collectionRef.add({
    field1: someData,  
    photos: ["url1,jpg","url2.png", "url3.wepb"]  THIS WORKS
})

我意识到我很可能错过了一些非常明显的东西。谁能看看是什么错误？

console.log(photoArray) 的输出是：

[]
0: "https://firebasestorage.googleapis.com/v0/i/t2-dev-9.appspot.com/o/photo2.jpeg?alt=media&token=82e3bd7d-a77a-4045-af71-1a7851bddd7c"
1: "https://firebasestorage.googleapis.com/v0/i/t2-dev-9.appspot.com/o/photo.jpeg?alt=media&token=c71f2fbe-ca64-4189-9403-4d24f1433d77"

长度：2

编辑：这是整个组件的基本版本。 该组件从输入中选择多个图像，循环浏览它们并将它们上传到 Firebase 存储，并将存储 URL 推送到“photoArray”数组”。如何将 photoArray 或其内容发布到 Firestore？

export default function AddPost() {
    
    const fileInput = useRef();
    const photoArray = [];

    function handleSubmit(e) {
        e.preventDefault()
        
        let fileArray = fileInput.current.files;
        for (let i = 0; i < fileArray.length; i++) {
            handleUpload(fileArray[i]);
        }

        console.log(photoArray); // OUTPUTS THE ARRAY
        const collectionRef = useFireStore.collection('posts');
        collectionRef.add({
            field1: someData,   // WORKS
            field2: someMoreData,    // WORKS
            photos: photoArray,    // DOESN'T
        })
    }

    function handleUpload() {
        
        const storageRef = useStorage.ref()
        const fileRef = storageRef.child(file.name)

        fileRef.put(file).then(() => {
            fileRef.getDownloadURL().then(function (url) {
                photoArray.push(url)
            });
       })

    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="file" ref={fileInput}/>
        </form>
    )

}

干杯，马特

Answer 1

这是一些（未经测试的）代码。

看看handleUpload 现在是如何返回一个承诺的，这样你就可以等待它完成后再继续。

export default function AddPost() {

    const fileInput = useRef();
    const photoArray = [];

    function handleSubmit(e) {
        e.preventDefault();

        let fileArray = fileInput.current.files;
        const uploadTasks = [];
        for (let i = 0; i < fileArray.length; i++) {
            uploadTasks.push(handleUpload(fileArray[i]));
        }
        Promise.all(uploadTasks).then(() => {
            console.log(photoArray); // OUTPUTS THE ARRAY
            const collectionRef = useFireStore.collection('posts');
            collectionRef.add({
                field1: someData,   // WORKS
                field2: someMoreData,    // WORKS
                photos: photoArray,    // SHOULD WORK NOW!
            });
        });
    }

    function handleUpload() {

        const storageRef = useStorage.ref();
        const fileRef = storageRef.child(file.name);

        return fileRef.put(file).then(() => {
            return fileRef.getDownloadURL().then(function (url) {
                photoArray.push(url);
            });
        });

    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="file" ref={fileInput} />
        </form>
    );

}

照片的顺序很可能是错误的，因为它们都是并行上传的，并且它们的 URL 是在各自的上传完成时添加的。如果你需要，我会让你找到解决问题的方法。

我还建议您尽可能使用async / await 而不是then()。

Answer 2

我假设你的照片 URL 很长，所以 Firesore 有一些限制， 您能否检查您的 Firebase 日志，看看您是否收到限制错误？

类似的东西 INVALID_ARGUMENT：属性“xxxx”的值超过 1048487 字节。，null))