无法从可重用组件返回函数和usestate

Question

我有一个 React 应用程序，允许将多个文件上传到 Fire Base。我正在尝试创建可重复使用的组件，但是遇到了一个问题，我无法返回该函数以及 usestate araay。

const useUploader = (data, foldername) => {
  const [upLoadcomplete, setuploacomplete] = useState()

  const uploadFiles = async () => {
    // function doing things.. one of which is to setuploacomplete depending on outcome.  
    }
  return uploadFiles
}
export default useUploader

在另一个jsx上有一个按钮，它使用提交来调用自定义挂钩，我希望该挂钩执行该功能，但也能够更新另一个div的状态（如果已完成或现在）..但是我似乎不知道该怎么做。我正在尝试 useEffects，但这导致该函数在按下提交按钮之前运行..这不是我想要的！

任何帮助都会很棒！！

Answer 1

为 React 应用程序中的文件上传创建可重用的自定义挂钩 (useUploader)。 像这样，

const useUploader = (foldername) => {
  const [uploadComplete, setUploadComplete] = useState(false);

  const uploadFiles = async (files) => {
    try {
      // function doing things.. one of which is to setuploacomplete depending on outcome.  
    

      setUploadComplete(true);
    } catch (error) {
      console.error('Error uploading files:', error);
      setUploadComplete(false);
    }
  };

  return { uploadFiles, uploadComplete };
};