时间戳

首页 > 解决方案 > ReactJS - 在不同的组件中使用相同的钩子

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

问题描述

我有一个从 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()
  }, [])

标签： javascriptreactjsreact-hooks

解决方案

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

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();

推荐阅读