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