创建的上传函数可以正常工作，但无法从函数返回usestate

Question

我已经尝试解决这个问题有一段时间了，并已将其减少到我能做到的最低限度，我有这个页面

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

function Uploadpage() {
  // Handles file selection
  const changeHandler = (e) => {
    setFiles(e.target.files)
  }

  // set use state for file selction
  const [files, setFiles] = useState()
  const [foldername, setFoldername] = useState("")

  return (
    <div>
      <input type="file" onChange={changeHandler} />
      <input type="text" onSubmit={setFoldername} placeholder="folder name" />
      <button
        className="bg-black text-white"
        onClick={() => useUploader(files, foldername)}
      >
        click here to upload
      </button>
      <div>
        return the status of upload here, this where I would like the status to
        be loaded from the useUploader function
      // this is a placeholder for conditional div
      <div>Successful upload</div>
      </div>
    </div>
  )
}
export default Uploadpage

一个非常简单的页面，允许您选择文件、命名文件夹然后上传。

useUploader 看起来像这样：

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

// incoming data and name of folder to put them in for upload
const useUploader = (data, foldername) => {

  // set use state of outcome as a string
  const [upLoadcomplete, setuploacomplete] = useState("")

  //files and create folder on firebase
  const uploadFiles = async () => {
    // loop files
    for (let i = 0; i < data.length; i++) {
      //set folder
      const location = `${foldername}/filename`
      const dataRef = ref(proStorage, location)
      //upload 
      uploadBytesResumable(dataRef, data[i])
      // to keep simple imagine it works
      setuploacomplete['Success']

    }
  }

  // return the function and the outcome of the upload
  return [uploadFiles, upLoadcomplete]
}
export default useUploader

我已经尝试了我能想到的一切，但是我无法弄清楚如何完成这项工作，我可以毫无问题地返回 uploadFiles 函数。但是，当我尝试返回 upLoadcomplete 时，它会导致错误

我知道如何解决此问题的唯一方法是不返回状态，这与我想要做的相反。

我的流程如下所示：

本质上我的问题是我无法返回函数和字符串......（两者都在单独的 Jsx 上）

有什么帮助吗？

Answer 1

如果

useUploader

的返回值是一个数组：

return [uploadFiles, upLoadcomplete]

你不能直接使用

useUploader

作为函数：

<button
  className="bg-black text-white"
  onClick={() => useUploader(files, foldername)}
>

而是解构

useUploader

的返回值，并在

uploadFiles

中使用

onClick

:

function Uploadpage() {
  ...

  // set use state for file selction
  const [files, setFiles] = useState()
  const [foldername, setFoldername] = useState("")
  const [uploadFiles, upLoadcomplete] = useUploader(files, foldername) // desturcture the return value

  // call uploadFiles in the onClick
  return (
    ...
    <button
      className="bg-black text-white"
      onClick={() => uploadFiles()}
    >
    ...
  )
}

Answer 2

你不能在react中调用另一个函数内的钩子函数。钩子必须在组件的根中调用，并且必须在每次渲染时调用。

所以这是你必须做的：

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

function Uploadpage() {
  // Handles file selection
  const changeHandler = (e) => {
    setFiles(e.target.files)
  }

  // set use state for file selction
  const [files, setFiles] = useState()
  const [foldername, setFoldername] = useState("")

  const [uploadFiles, upLoadcomplete] = useUploader(files, foldername)

  return (
    <div>
      <input type="file" onChange={changeHandler} />
      <input type="text" onSubmit={setFoldername} placeholder="folder name" />
      <button
        className="bg-black text-white"
        onClick={() => uploadFiles()} 
      >
        click here to upload
      </button>
      <div>
        return the status of upload here, this where I would like the status to
        be loaded from the useUploader function
      // this is a placeholder for conditional div
      <div>Successful upload</div>
      </div>
    </div>
  )
}
export default Uploadpage