Heim > Fragen und Antworten > Hauptteil
P粉1569834462023-09-02 00:17:20
这个中间函数似乎是问题所在:
function usePage() { return React.useState(1); }
由 useState
返回的状态设置函数本身不会在每次渲染时重新创建,但通过此外部函数调用它似乎会破坏这一点。这导致依赖项发生变化,如 useEffect
依赖项数组所观察到的。
如果您不需要这个 usePage
函数(在示例中您不需要,但在更大的上下文中可能存在有意义的情况),那么只需将其完全删除并使用直接useState
:
const [page, setPage] = useState("");
通常,人们无论如何都不想在函数内调用钩子,因为它可以快速且轻松地导致违反必须在每次渲染上一致且以相同顺序调用钩子的规则。因此,最好将钩子调用保留在组件本身的主体中(以及组件逻辑的早期)。
有时,在某些情况下,您确实希望自定义函数充当 useEffect
中的依赖项。由于声明的函数在每次渲染时都会重新声明,因此您会遇到上面遇到的问题。为了解决这个问题,您可以将该函数包装在 useCallback
挂钩中,该挂钩本身也有一个依赖项数组,与 useEffect
非常相似。这个钩子的目的是创建自定义函数,React 可以将这些函数跨渲染缓存为单个函数实例(除非依赖项发生变化)。例如:
const myCustomFunction = useCallback(args => { // use function args, etc. }, [someDependencies]);