当尝试设置状态时，钩子调用错误无效
当尝试设置状态时，钩子调用错误无效
提问于 2022-06-22 14:21:52
我有一个场景，我被迫调用触发器方法来显示来自两个不同地方的模式，一个是使用热键组合，另一个是单击工具栏按钮。为了做到这一点，我有下面的代码，其中我调用triggerCustomLinkModal来设置状态，但是我会被Invalid Hook call error击中。
import { useState, useCallback, useEffect } from "react"
import { Dialog } from "@blueprintjs/core"
const useLocalState = () => {
const [isShown, setIsShown] = useState(false)
const setState = useCallback((state) => {
setIsShown(state)
})
const getState = useCallback(() => {
return isShown
})
return {
setState,
getState
}
}
export const CustomLinkModalUI = () => {
const { getState } = useLocalState()
return (
<>
<Dialog isOpen={getState()} />
</>
)
}
export const triggerCustomLinkModal = () => {
const { setState } = useLocalState()
setState()
}回答 1
Stack Overflow用户
发布于 2022-06-22 14:43:46
在注释中从Chris展开(您不能在反应组分之外使用钩子)。->，因此您不能在triggerCustomLinkModal中调用triggerCustomLinkModal，因为triggerCustomLinkModal不是一个React组件)：
您实际上并不需要useCallback钩子，甚至不需要函数本身。根据反应文档：
备注 React保证setState函数标识是稳定的，不会在重新呈现时发生更改。这就是为什么从useEffect或useCallback依赖列表中省略是安全的。
这也意味着使用useCallback钩子来设置状态是没有意义的(因为useCallback角色只是返回a memoized callback)
基本需要的是在最近的parrent组件中设置一个状态，并将setIsShown作为支柱传递给isShown函数。
当前的实现，即使不是因为错误，它也不会引用相同的状态，因为在每个useLocalState()上，您正在初始化一个新的新状态(所以在CustomLinkModalUI和triggerCustomLinkModal中没有指向相同的状态)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72717288
复制相关文章
相似问题
腾讯云开发者
