[英]How to use custom hook>
I am uploading an image and title for that image to firebase.我正在将该图像的图像和标题上传到 firebase。 I have made a custom hook(useStorage) which is used for uploading image and title for that image.
我制作了一个自定义钩子(useStorage),用于上传该图像的图像和标题。 I have two separate components UploadForm and ProgressBar, I am passing title and selected image and title from UploadForm to ProgressBar.
我有两个独立的组件 UploadForm 和 ProgressBar,我将标题和选定的图像和标题从 UploadForm 传递到 ProgressBar。 I am able to make fields for image and title in firestore, image is getting uploaded but title field is remaining empty string.
我可以在 Firestore 中为图像和标题创建字段,图像正在上传,但标题字段仍然是空字符串。
I am attaching code for 3 files, any help would be appreciated.我附上了 3 个文件的代码,任何帮助将不胜感激。
import { useState, useEffect } from 'react'; import { projectStorage, projectFirestore, timestamp } from '../firebase/config'; const useStorage = (file) => { const [progress, setProgress] = useState(0); const [error, setError] = useState(null); const [url, setUrl] = useState(null); const [title, setTitle] = useState(''); 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(); await collectionRef.add({ url, createdAt, title }); setUrl(url); setTitle(title); }); }, [file, title]); return { progress, url, error, title }; } export default useStorage;
import React, { useState } from 'react'; import ProgressBar from './ProgressBar'; const UploadForm = () => { const [file, setFile] = useState(null); const [error, setError] = useState(null); const [header, setHeader] = useState('') const types = ['image/png', 'image/jpeg']; const handleChange = (e) => { let selected = e.target.files[0]; if (selected && types.includes(selected.type)) { setFile(selected); setError(''); } else { setFile(null); setError('Please select an image file (png or jpg)'); } }; return ( <form> <label> <input type="file" onChange={handleChange} /> <span>+</span> </label> <input placeholder="Enter title for pic..." type="text" name={header} onChange={(e)=> setHeader(e.target.value)} /> <div className="output"> { error && <div className="error">{ error }</div>} { file && <div>{ file.name }</div> } { file && <ProgressBar file={file} setFile={setFile} header={header} /> } </div> </form> ); } export default UploadForm;
import React, { useEffect } from 'react'; import useStorage from '../hooks/useStorage'; import { motion } from 'framer-motion'; const ProgressBar = ({ file, setFile, header }) => { const { progress, url, title } = useStorage(file); useEffect(() => { if (url) { setFile(null); } }, [url, setFile]); return ( <motion.div className="progress-bar" initial={{ width: 0 }} animate={{ width: progress + '%' }} ></motion.div> ); } export default ProgressBar;
useStorage
have a [title, setTitle]
hook which you use in useStorage
有一个[title, setTitle]
钩子,您可以在其中使用
await collectionRef.add({ url, createdAt, title });
setUrl(url);
setTitle(title);
But the problem is that the title is empty.但问题是标题是空的。 You never set a title.
你从不设置标题。 You pass the
header
to the progress bar, but you don't use it.您将
header
传递到进度条,但您不使用它。 You should update useStorage two take to arguments: file and header and call useStorage(file, header)
您应该将 useStorage 两个更新为 arguments: file 和 header 并调用
useStorage(file, header)
Update useStorage signature to const useStorage = (file, header) => {}
Inside useStorage you can update const [title, setTitle] = useState(header)
将 useStorage 签名更新为
const useStorage = (file, header) => {}
在 useStorage 中,您可以更新const [title, setTitle] = useState(header)
As far as I can tell you never get title
from anywhere.据我所知,你永远不会从任何地方获得
title
。 All you do is send your state variable title
which is initialized with ''
to Firestore, then setTitle
which that same empty string title
.您所要做的就是将用
''
初始化的 state 变量title
发送到 Firestore,然后将相同的空字符串title
设置为setTitle
。
Did you mean to pass header
into your hook alongside file
?您的意思是将
header
与file
一起传递到您的挂钩中吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.