如何将变量传递给 React 中的钩子？

Question

我正在尝试将一些自定义元数据传递给我的 firebase firestore，我相信我必须将我在组件中抓取的元数据传递给钩子，但我不确定该怎么做，

我的组件：

const UploadForm = () => {

    const [file, setFile] = useState(null);
    const [error, setError] = useState(null);
    const [metadata, setMetadata] = useState(null);

    const types = ['image/png', 'image/jpeg'];

    const changeHandler = (e) => {
        let selected = e.target.files[0];
        
        if (selected && types.includes(selected.type)) {
            setFile(selected);
            setError('');
            const pieceName = document.getElementById("pieceName").value;
            const pieceDescription = document.getElementById("pieceDescription").value;
            const newMetadata = {
                customMetaData: {
                artName: pieceName,
                artDescription: pieceDescription
                }
            };
            setMetadata(newMetadata);
...
export default UploadForm;

&我的钩子：

const useStorage = (file, metadata) => {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);

    useEffect(() => {
        // references
        const storageRef = projectStorage.ref(file.name);
        const collectionRef = projectFirestore.collection('images');
        storageRef.put(file).on('state_changed', (snap) => {
            let percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
            setProgress(percentage);
        }, (err) => {
            setError(err);
        }, async () => {
            const url = await storageRef.getDownloadURL();
            const createdAt = timestamp();
            collectionRef.add({ url, createdAt, metadata });
            setUrl(url);
        });
    }, [file, metadata]);
    return { progress, url, error };
}

export default useStorage;

我可以毫无问题地上传到 Firebase Storage/firestore，但不知道如何提供这些额外的元数据。

Answer 1

要更改元数据，只需在ref 上调用updateMetadata：

const useStorage = (file, metadata) => {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);

    useEffect(() => {
        // references
        const storageRef = projectStorage.ref(file.name);
        const collectionRef = projectFirestore.collection('images');
        storageRef.put(file).on('state_changed', (snap) => {
            let percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
            setProgress(percentage);
        }, (err) => {
            setError(err);
        }, async () => {
            await storageRef.updateMetadata(metadata)
            const url = await storageRef.getDownloadURL();
            const createdAt = timestamp();
            collectionRef.add({ url, createdAt, metadata });
            setUrl(url);
        });
    }, [file, metadata]);
    return { progress, url, error };
}

export default useStorage;

您可以阅读更多关于它的信息here。