reactjs - 是否可以在React的useEffect中使用自定义钩子(Hook)？

我有一个非常基本的自定义钩子，该钩子采用从Firebase返回文档的路径

import React, { useState, useEffect, useContext } from 'react';
import { FirebaseContext } from '../sharedComponents/Firebase';

function useGetDocument(path) {
    const firebase = useContext(FirebaseContext)
    const [document, setDocument] = useState(null)

    useEffect(() => {
        const getDocument = async () => {
            let snapshot = await firebase.db.doc(path).get()
            let document = snapshot.data()
            document.id = snapshot.id
            setDocument(document)
        }
        getDocument()
    }, []);

    return document
}

export default useGetDocument

然后我使用useEffect作为componentDidMount / constructor来更新状态

useEffect(() => {
    const init = async () => {

      let docSnapshot = await useGetDocument("products/" + products[selectedProduct].id + "labels/list")
      if(docSnapshot) {
        let tempArray = []
        for (const [key, value] of Object.entries(docSnapshot.list)) {
          tempArray.push({id: key, color: value.color, description: value.description})
        }
        setLabels(tempArray)
      } else {
        setLabels([])
      }

      await props.finishLoading()
      await setLoading(false)
    }
    init()
  }, [])

但是，我从“ throwInvalidHookError”中得到了一个不变的违规，这意味着我违反了钩子的规则，所以我的问题是您是否不能在useEffect内使用自定义钩子，或者我是否在做其他错误的事情。

最佳答案

据我所知，组件中的钩子应该始终保持相同的顺序。而且由于useEffect有时会发生，并且并非每个渲染都违反了钩子规则。在我看来，您的useGetDocument并不需要。

我提出以下解决方案：


保持您的useGetDocument不变。
将组件更改为具有useEffect作为依赖项的document。


您的组件可能如下所示：

const Component = (props) => {
    // Your document will either be null (according to your custom hook) or the document once it has fetched the data.
    const document = useGetDocument("products/" + products[selectedProduct].id + "labels/list");

    useEffect(() => {
        if (document && document !== null) {
            // Do your initialization things now that you have the document.
        }
    }, [ document ]);

   return (...)
}

关于reactjs - 是否可以在React的useEffect中使用自定义钩子(Hook)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59070930/