火箱图像上传两次

Question

我正在尝试创建壁画应用程序，当我尝试在火灾存储中上传图像时，只有一个图像，但是在Fire Store中有两个条目用于同一图像但是这里什么都没有用的

是我的用途存储钩

import React, { useState, useEffect } from 'react'
import { fireStorage, fireStore } from '../firebase-config';
import { collection, addDoc, serverTimestamp } from "firebase/firestore";
import { ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";

export default function useStorage(file) {
  const [progresspercent, setProgresspercent] = useState(0);
  const [error, setError] = useState(null);
  const [url, setImgUrl] = useState(null);

  useEffect(() => {
    const storageRef = ref(fireStorage, `files/${file.name}`);
    const uploadTask = uploadBytesResumable(storageRef, file);
    
  
    uploadTask.on("state_changed",
        (snapshot) => {
          const progress =
            Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
          setProgresspercent(progress);
        },
        (error) => {
          setError(error);
        },
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            setImgUrl(downloadURL)
            addDoc(collection(fireStore, 'images'),{
              url: downloadURL,
              createdAt: serverTimestamp()
            })
          });
        }
      );

  },[file]);

  return { progresspercent, url, error};
}

这是我的上传表格

import { useState } from "react";
import ProgressBar from './ProgressBar'


function UploadForm() {
  const [file, setFile] = useState(null);
  const [error, setError] = useState("");

  const allowedType = ["image/png", "image/jpg", "image/jpeg"];

  const changeHandler = (e) => {
    e.preventDefault()
    let selectedFile = e.target.files[0]
    if (selectedFile && allowedType.includes(selectedFile.type)){
      setFile(selectedFile);
      setError('')
    }else{
      setFile(null);
      setError("Please select an image file");
    }
  };

  return (
    <form>
      <label>
        <input type="file" onChange={changeHandler} />
        <span>+</span>
      </label>
      <div className="output">
        {error && <div className="error">{error}</div>}
        {file && <div>{file.name}</div>}
        {file && <ProgressBar file={file} setFile={setFile} />}
      </div>
    </form>
  );
}
export default UploadForm;

这是我的进度栏

import React, { useEffect } from "react";
import useStorage from "..//../src/Hooks/useStorage";

export default function ProgressBar({ file, setFile }) {
  const { url, progresspercent } = useStorage(file);

  useEffect(() => {
    if (url) {
      setFile(null);
    }
  }, [url, setFile]);

  return (
    <div
      className="progress-bar"
      style={{ width: progresspercent + "%" }}
    ></div>
  );
}

我没有其他组件，我尝试修复它，但我不知道为什么它首先发生。