Question

我正在尝试使用自定义钩子，但是我遇到此错误，没有特定的事情要做。我也在这里搜索了类似的问题，但是发现他们谈论redux和创建函数

TypeError: Object is not a function
UploadBard
src/components/uploadBar.jsx:4
  1 | import React, { useState, useEffect } from 'react'
  2 | import useStorage from '../custumHooks/useStrage'
  3 | function UploadBard({ file }) {
> 4 |       const [progress, err, url] = useStorage(file)
  5 | 
  6 |       return (
  7 |             <div class="progress">

source file of the err

import React, { useState, useEffect } from 'react'
import useStorage from '../custumHooks/useStrage'
function UploadBard({ file }) {
      const [progress, err, url] = useStorage(file)

      return (
            <div class="progress">
                  {/* {progress} */}
                  <div class="progress-bar" role="progressbar" style={{ width: `${progress}%`, ariaValuenow: "41", ariaValuemin: "0", ariaValuemax: "100", }}></div>
            </div>
      )

}
export default UploadBard;

the file of the custom hook

import React, { useState, useEffect } from 'react'
import { storage } from '../firebase/config'
function useStorage(file) {
      const [progress, setProgress] = useState(file)
      const [err, setErr] = useState(null)
      const [url, setUrl] = useState(null)
      useEffect(() => {
            if (file) {
                  const storageRef = storage.ref(file.name)
                  storageRef.put(file).on('state_changed', (snap) => setProgress((snap.bytesTransferred / snap.totalBytes) * 100), err => console.log(err))
            }
      }, [file])
      return { progress, err, url }
}
export default useStorage;

Answer 1

您要从自定义钩子返回对象{}，而不是数组[]。因此尝试：

const { progress, err, url } = useStorage(file)

代替原始代码：

const [progress, err, url] = useStorage(file)

TypeError：对象不是具有创建自定义反应挂钩的函数

1 个答案: