ReactJS-在不同组件中使用相同的钩子

Question

我有一个从api中获取数据的钩子，结果是我用setAllCommunitiesFromSponsor将其置于组件的状态。

现在我需要在另一个组件中使用完全相同的钩子。

在这种情况下，除了复制粘贴外，什么是实现此目的的正确方法？我需要创建一个自定义钩子吗？但是setState函数呢？

钩子：

  useEffect(() => {
    const getAllCommunitiesFromSponsor = async () => {
      try {
        const result = await api.get(
          'https://someurl.com'
        )
        const resultArray = Object.values(result.data.rows)
        setAllCommunitiesFromSponsor(resultArray)
      } catch (error) {
        toast.error('Failed to fetch data from the server')
      }
    }
    getAllCommunitiesFromSponsor()
  }, [])

Answer 1

您可以创建自己的钩子，这非常简单。它只是一个使用钩子的函数。您的情况：

const useCommunitiesForSponsor = () => {
    const [allCommunitiesFromSponsor, setAllCommunitiesFromSponsor] = useState();

    useEffect(() => {
        const getAllCommunitiesFromSponsor = async () => {
            try {
                const result = await api.get(
                    'https://someurl.com'
                )
                const resultArray = Object.values(result.data.rows)
                setAllCommunitiesFromSponsor(resultArray)
            } catch (error) {
                toast.error('Failed to fetch data from the server')
            }
        }
        getAllCommunitiesFromSponsor()
    }, [])

    return allCommunitiesFromSponsor;
}

现在您的组件中就像其他任何挂钩一样简单地使用该挂钩：

const allCommunitiesFromSponsor = useCommunitiesForSponsor();