自定义反应钩子不更新其值

Question

所以我有以下自定义钩子，我想使用它来根据应用程序内的各种触发器启用/禁用一些按钮。

import { useState } from 'react';
interface IDisableProps {
buttonsDisabled: boolean;
toggleButtons: (isDisabled: boolean) => void;
}
export default function useDisable(): IDisableProps {
const [buttonsDisabled, setButtonsDisabled] = useState<boolean>(false);
const toggleButtons = (isDisabled: boolean) => {
setButtonsDisabled(isDisabled);
};
return {
buttonsDisabled,
toggleButtons,
};
}

我使用它的地方之一是另一个钩子，我将其声明为

const { buttonsDisabled, toggleButtons } = useDisable();然后在适当的时候使用它，例如

if (!buttonsDisabled) {
toggleButtons(true);
}

但是，状态始终是初始状态。在toggleButtons中使用调试器输入时，我看到在本地范围内，this未定义并且看不到buttonsDisabled的值。我在这里错过了什么？我是否采取了错误的方法？

Answer 1

来自构建自己的钩子 – React

两个组件使用相同的 Hook 共享状态吗？不。自定义 Hook 是一种重用有状态逻辑(例如设置订阅并记住当前值(的机制，但每次使用自定义 Hook 时，其中的所有状态和效果都是完全隔离的。

因此，当您说"[您]使用它的地方之一是另一个钩子"时，您是在内存中创建额外的[buttonsDisabled, setButtonsDisabled]，而不是引用在其他地方创建的相同状态useDisable。

共享状态的两种方法是 1( 传递道具和 2( 使用上下文。

Answer 2

尝试

const toggleButtons = useMemo(isDisabled: boolean) => {
setButtonsDisabled(isDisabled)
}, [isDisabled]);