如何创建一个可重用的调用setUserContext的函数？React钩子useContext
如何创建一个可重用的调用setUserContext的函数？React钩子useContext
提问于 2021-09-25 19:52:32
所以我有4个组件，它们都在onClick处理程序中做同样的事情。
我必须在它们中的每一个中定义这个代码。
我不知道如何使其可重用的原因是，您不能在常规的非react实用函数中调用setUserContext。我试着创建一个钩子，但是你不能在onClick中使用钩子作为回调函数。
我在这里有什么选择？
const { userContext, setUserContext } = useContext(UserContext);
// this goes inside onClick and is defined in like 4 components (too much repetition)
const favoriteItem = (e) => {
e.stopPropagation();
e.preventDefault();
setUserContext({ ...userContext, favoriteItems: JSON.parse(localStorage.getItem("favoriteItems")) });
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-25 20:02:07
您可以创建自定义挂钩。
const useCustomHook = () => {
const { userContext, setUserContext } = useContext(UserContext);
const favoriteItem = (event, game) => {
e.stopPropagation();
e.preventDefault();
setUserContext({ ...userContext, favoriteItems: JSON.parse(localStorage.getItem("favoriteItems")) });
}
return { favoriteItem }
}
export default useCustomHook;您的组件可以做到这一点。
...
const { favoriteItem } = useCustomHook()
return (
<Element onClick={(event) => favoriteItem(event, game)} />
)
... 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69331745
复制相关文章
点击加载更多
相似问题
无效钩子调用- useContext - React
如何使可重用的react查询钩子？
带有React钩子的useContext
如何在React中创建可重用的函数
使用useContext导入函数会产生“usecontext钩子未明错误:无效钩子调用”
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
