firebase 如何处理第一和第二(?)呈现useEffect和useState?

s3fp2yjn  于 2023-05-01  发布在  其他
关注(0)|答案(1)|浏览(100)

当我进入FormPage时,我调用这个customHook来获取我可能在表单调查中上传的图像的路径。但是在一开始我得到'image/event/NaN',几毫秒后它变成了'image/event/5'

import { ref, listAll } from "firebase/storage";
import { FirebaseStorage } from "../firebase/config";
import { useEffect, useState } from "react";

export const useGetLastFolder = (postType) => {

    const [folderPath, setFolderPath] = useState([]);

    const listRef = ref(FirebaseStorage, `image/${postType}`);

    useEffect(() => {
        listAll(listRef)
            .then((res) => {
                const arrayFolders = res.prefixes.map((folderRef) => {
                    return folderRef.name;
                })
                const lastFolder = (parseInt(arrayFolders[arrayFolders.length - 1]) + 1).toString();
                setFolderPath(`image/${postType}/${lastFolder}`);
            })
            .catch((error) => {
                // Uh-oh, an error occurred!
            });

    }, [])

    return {
        lastPossibleFolderPath: folderPath
    }

}

我测试了putting as initialState '[4]',我得到了'image/event/5',它工作得很好。
因此setFolders设置undefined(?)第一次渲染,然后设置文件夹数组。

oxiaedzo

oxiaedzo1#

在您当前的代码中,文件夹被初始化为[],其长度为0。这意味着您正在尝试访问以下行的文件夹[-1]

const lastFolder = (parseInt(folders[folders.length - 1]) + 1).toString();

这是未定义的,parseInt将返回NaN。你得处理这个案子。

const lastFolder = (parseInt(folders[folders.length - 1] || 0) + 1).toString();

或者任何适合您的情况的默认值。

相关问题