React自定义Hook useUploader无法同时返回函数与状态问题求助

核心错误点 #

1. Hook调用位置违规：不能在onClick事件回调中调用useUploader，React Hooks必须在组件顶层作用域调用，禁止嵌套在事件、条件或循环逻辑内。
2. 输入框事件误用：文本输入框使用onSubmit是错误的，单个输入框应通过onChange事件更新foldername状态。
3. 状态更新语法错误：setuploacomplete['Success']写法无效，状态更新函数需传入具体值，正确写法为setuploacomplete("Success")。
4. 异步上传未正确处理：uploadBytesResumable返回UploadTask对象，需监听状态或转为Promise确保异步操作完成后再更新状态。
5. 文件名重复覆盖：固定使用filename作为文件名会导致多文件上传时相互覆盖，应使用文件自身的名称。

修正后的代码 #

1. Uploadpage组件

import React, { useState } from "react";
import useUploader from "./uploaderexample";

function Uploadpage() {
  const [files, setFiles] = useState(null);
  const [foldername, setFoldername] = useState("");

  // 在组件顶层调用自定义Hook
  const [uploadFiles, uploadStatus] = useUploader();

  // 处理文件选择
  const changeHandler = (e) => {
    setFiles(e.target.files);
  };

  // 处理文件夹名称输入
  const handleFolderNameChange = (e) => {
    setFoldername(e.target.value);
  };

  // 点击上传按钮触发上传
  const handleUpload = () => {
    if (!files || !foldername) return; // 校验必填项
    uploadFiles(files, foldername);
  };

  return (
    <div>
      <input type="file" multiple onChange={changeHandler} />
      <input
        type="text"
        onChange={handleFolderNameChange}
        value={foldername}
        placeholder="folder name"
      />
      <button className="bg-black text-white" onClick={handleUpload}>
        click here to upload
      </button>
      <div>
        {/* 根据上传状态展示对应内容 */}
        {uploadStatus === "" && <div>等待上传...</div>}
        {uploadStatus === "Success" && <div>Successful upload</div>}
        {uploadStatus === "Error" && <div>上传失败，请重试</div>}
      </div>
    </div>
  );
}

export default Uploadpage;

2. useUploader自定义Hook

import { ref, uploadBytesResumable } from "firebase/storage";
import { proStorage } from "./config";
import { useState } from "react";

const useUploader = () => {
  const [uploadStatus, setUploadStatus] = useState("");

  const uploadFiles = async (files, foldername) => {
    setUploadStatus(""); // 重置上传状态
    try {
      // 遍历所有选中文件
      for (const file of files) {
        const storageRef = ref(proStorage, `${foldername}/${file.name}`);
        const uploadTask = uploadBytesResumable(storageRef, file);
        
        // 将UploadTask转为Promise，等待上传完成
        await new Promise((resolve, reject) => {
          uploadTask.on(
            "state_changed",
            () => {}, // 可在此添加上传进度监听逻辑
            (error) => reject(error),
            () => resolve()
          );
        });
      }
      // 所有文件上传完成后更新成功状态
      setUploadStatus("Success");
    } catch (error) {
      console.error("上传失败:", error);
      setUploadStatus("Error");
    }
  };

  return [uploadFiles, uploadStatus];
};

export default useUploader;

关键改进说明 #

• Hook调用规范：将useUploader移至组件顶层，符合React Hooks规则，确保状态能正确更新和传递。
• 输入校验：上传前检查文件和文件夹名称是否存在，避免无效调用。
• 异步处理：将UploadTask转为Promise，确保所有文件上传完成后再更新状态，避免状态更新不及时或不完整。
• 状态反馈：新增错误状态处理，完善用户的上传结果提示。
• 文件名唯一性：使用file.name作为文件名，避免多文件上传时的覆盖问题。

内容的提问来源于stack exchange，提问作者Brian